简体   繁体   English

如何在角度5中绑定有关角度材料下拉的数据?

[英]How to bind data on angular material dropdown in angular 5?

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. 在上面的代码上,我使用了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>

i want to know how to bind data on dropdown? 我想知道如何在下拉列表上绑定数据?

使用[ngValue]

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

Try binding using ngModel in the select like this - 在这样的选择中尝试使用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>

or if you want to use formControl do it like this - 或者,如果您想使用formControl,请按以下步骤进行操作-

[formControl]="yourControl"

Due to this issue in Angular bind the formControl instance instead of using formControlName . 由于Angular中的此问题 ,请绑定formControl实例,而不要使用formControlName

Working Example 工作实例

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM