Как связать данные о выпадении углового материала в угловых 5?

Question

В основном я обновляю профиль пользователя, для которого у меня есть информация о пользователе.который должен быть привязан к соответствующим полям пользователя.

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

в приведенном выше коде я использую formgroup и 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>

я хочу знать, как связывать данные при выпадении?

Answer 1

Попробуйте связать, используя ngModel в выделенном виде, как это -

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

или, если вы хотите использовать formControl, сделайте это так -

[formControl]="yourControl"

Из-за эта проблема в Angular связывает экземпляр formControl вместо использования formControlName .

Рабочий пример

Answer 2

используйте [ngValue]

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