How to bind data on angular material dropdown in angular 5?

Question

basically i am Updating user profile on which i have a user info. which is to be bind on the user respective fields.

    this.editOfferprice= new FormGroup({
        xyz : new FormControl(xxxx,[]),
        xxx: new FormControl(xxxx,[Validators.required]),
        wwwID : new FormControl(xxxx,[Validators.required]))};

on above code am using formgroup and formcontrol.

<mat-form-field fxFlex="49"> <mat-select placeholder="Select xxx" formControlName="xxx"> <mat-option *ngFor="let P of Pro" [value]="P.ID"> {{P.Name}} </mat-option> </mat-select> <mat-error *ngIf="editOffer.controls['xxx'].errors && editOfferprice.controls['xxx'].errors.required"> You must select NAme</mat-error> </mat-form-field>

i want to know how to bind data on dropdown?

I think it's your solution (https://stackoverflow.com/questions/38655613/angular2-set-value-for-formgroup#39752561) — Jai Kumaresh, Dec 12 '18 at 13:18

score 0 · Answer 1 · answered Dec 12 '18 at 12:50

0

use the [ngValue]

*ngFor="let P of Pro" [ngValue]="P.ID">

answered Dec 12 '18 at 12:50

Sachila Ranawaka

39,756
7
56
80

should work with `value` as well, see https://material.angular.io/components/select/examples – Pardeep Jain Dec 12 '18 at 12:51

Pardeep Jain · Answer 2 · 2018-12-12T13:04:47.723

Try binding using ngModel in the select like this -

<mat-form-field>
  <select matNativeControl [(ngModel)]="selectedOption" required>
    <option *ngFor="let P of Pro [value]="P.ID">{{P.Name}}</option>
  </select>
</mat-form-field>

or if you want to use formControl do it like this -

[formControl]="yourControl"

Due to this issue in Angular bind the formControl instance instead of using formControlName.

Working Example

How to bind data on angular material dropdown in angular 5?

2 Answers2