binding [(ngModel)] to undefined value

Question

I have the below [(ngModel)] resulting in an error since I am not getting any values from the backend,

   <input type="number" 
          [(ngModel)]="list.test[0]">

in the above example I am not getting any values for test array from the backend resulting in an error saying cannot read property 0 of undefined.

I tried [(ngModel)]="list?.test[0]" but that didnt help either.

Answer 1

The angular 2-way-binding with ngModel does not support the safe navigation operator ?.

There is still an open feature request for it: https://github.com/angular/angular/issues/7697

You can use this workaround: [(ngModel)]="list.test && list.test[0]"

So with 3 inputs your code should look like this:

<form>
<input type="number" name="item1" [(ngModel)]="list.test && list.test[0]">
<input type="number" name="item2" [(ngModel)]="list.test && list.test[1]">
<input type="number" name="item3" [(ngModel)]="list.test && list.test[2]">
</form>

It is important to give each input an individual name attribute.