Angular Form Controls and [ngValue] binding with Option elements

New Discovery
Use ngModel instead!

Angular NgModel Validation

JWP ・ Sep 24 '20

#angular #ngmodel #validation

 <select formControlName="state" > <option *ngFor="let state of states" [selected]="state.name === address.state" [ngValue]="state.name" > {{ state.name }} </option> 

Here we show a Select control allowing the user to pick a State. The Options are created via the *ngFor statement using the array of states.

Notice the [ngValue] directive? It serves to stop the Select control from pseudo-selecting the first option in the list. If we are using formControl validation, that first psuedo-selected Option is also marked invalid! Oh yes, one other thing, the [selected] test doesn't work either.

This tells us that even when we specify the value to show 'state.name' it's not enough.

JWP2020