Binding ngModel input to form array in Angular

Question

i want to create *ngFor binding to create another form using array and ngModel input.

So when i select the value in it, then i click the button to display new form with different value.

Any ideas how it should be worked?

I have tried this but the result is just same as the other ngModel value.

This is for Progress Tracker in my company, running on AngularJS 8 using Clarity-VMWare. I've tried using let i = index and it doesn't get the value.

HTML:

<div class="card card-report" *ngFor="let item of report">
    <div class="card-block block-card">
        <div class="card-title">
            <div class="clr-wrapper">
                <select class="clr-select-1" [(ngModel)]="selectedProjects">
                    <option [ngValue]="default" disabled>Project yang kamu kerjain apa?</option>
                    <option [ngValue]="item" *ngFor="let item of listProjects">
                        {{item.name}}
                    </option>
                </select>
            </div>

            <div class="clr-wrapper">
                <select class="clr-select-2" [(ngModel)]="selectedRoles">
                    <option [ngValue]="default" disabled>Kamu jadi apa di project ini?</option>
                    <option [ngValue]="item" *ngFor="let item of listRoles">
                        {{item.name}}
                    </option>
                </select>
            </div>
        </div>
        <div class="card-text text-card">
            <p class="sub-text-card">Kamu belum melakukan apa-apa</p>
        </div>
    </div>
</div>

TS:

listProjects: any[]
listRoles: any[]
selectedProjects: any;
selectedRoles: any;

addReport() {
  this.report.push(this.report.length)
}

The form array was working, but i want to know how the value should be different than the other select. And the result that i hope works is : Should be like add new form array, but the value in it can be changed.

try using another name for the value, other then item in the second *ngFor — Bilal Dekar

vishwajeet kumar vishwajeet kumar · Accepted Answer · 2019-07-24T12:00:02

Although what you are asking is not very clear. but a possible problem which I see is with [ngValue]. You could try using [value] instead.

 <option [value]="item.name" *ngFor="let item of listProjects">
       {{item.name}}
 </option>

Binding ngModel input to form array in Angular

1 Answers