Angular ngValue is not binding

Question

ngValue will not bind the value unless you keep the reference of same list. is it correct ?

This will not work

        this.myForm.get('user').patchValue(this.currentUser);

This will work

  const findIndex = this.user.findIndex(
          (item) => item.id == this.currentUser.id
        );
        this.myForm.get('user').patchValue(this.user[findIndex]);

Also i came to one more property compareWith that can be used to bind as well.

This will work if i use it with compareWith.

        this.myForm.get('user').patchValue(this.currentUser);

Playground Link: https://stackblitz.com/edit/angular-ivy-a4zbhn?file=src%2Fapp%2Fapp.component.ts

Yong Shun Yong Shun · Accepted Answer · 2021-09-19T05:34:39

You need to add [compareWith] to the <select> element so there Angular could bind the value to the <select> by your defined comparison logic.

<select formControlName="user" [compareWith]="compare">
    <option *ngFor="let us of user" [ngValue]="us">{{ us.name }}</option>
</select>

Sample Solution on StackBlitz

Angular ngValue is not binding

1 Answers

References