CODEWITHSUNDEEP
angular
slywyrm
slywyrm

Reputation: 11

Angular 2+ - ngModel doesn't bind initial values to selects made in ngFor loop

If I create select inputs in ngFor loop, and then bind values by ngModel to some array - these selects don't get their initial values from this array (like it creates only a one-way binding). Here is quick example in plunker: https://plnkr.co/edit/LX7XyrHcMGH8avZYA0pv?p=preview

@Component({
  selector: 'my-app',
  template: `
    <div *ngFor="let select of test; let i = index" >
      <select name="test" [(ngModel)]="vals[i]">
        <option *ngFor="let item of select" [ngValue]="item">{{item.lol}}</option>
      </select>
    </div>
    <div style="display: flex">
      <div *ngFor="let val of vals; let last = last;">
        {{val.lol}}{{last? '' : ','}} 
      </div>
    </div>
  `,
})
export class App {
  test: any = [
    [{ lol: '1' }, { lol: '2' }, { lol: '3' }],
    [{ lol: '4' }, { lol: '5' }, { lol: '6' }],
    [{ lol: '7' }, { lol: '8' }, { lol: '9' }],
  ];
  vals: any[] = [{ lol: '1' }, { lol: '4' }, { lol: '7' }];
  constructor() {}
}

Upvotes: 0

Views: 292

Answers (1)

slywyrm
slywyrm

Reputation: 11

Using [compareWith] in this example solves this issue

UPDATE: While it fixed the example, in my code ngModel was updating value of only one select input, generated by ngFor. For me setting [ngModelOptions]="{standalone: true}" has solved the issue. Hope it helps someone...

Upvotes: 1

Related Questions