时间戳

首页 > 解决方案 > 无法将动态数据绑定到 Angular 材质选择表单

angular - 无法将动态数据绑定到 Angular 材质选择表单

问题描述

我无法使用 Angular8 使用 Angular Material 选择表单动态显示数据。我的代码如下。

product.componet.html：

<form [formGroup]="productForm" (submit)="saveProduct($event)" novalidate> 

    <mat-form-field appearance="outline" class="col-lg-4 col-md-6 col-sm-12">
        <mat-label>Product Name</mat-label>
           <input matInput placeholder="Product Name" aria-label="Product Name" formControlName="Name" maxlength="70" required>
    </mat-form-field>
   <mat-form-field appearance="outline" class="col-lg-4 col-md-6 col-sm-12">
                            <mat-label>Gender</mat-label>
                            <mat-select
                                placeholder="Select Gender" 
                                aria-label="Select Gender" 
                                (selectionChange)="onGenderSelectionChanged($event)"
                            >
                                <mat-option *ngFor="let s of genders" [value]="s.Code">
                                    <span *ngIf="!s.Code">
                                    </span>
                                    <span *ngIf="s.Code">
                                        {{s.Name}}
                                    </span>
                                </mat-option>
                            </mat-select>
                        </mat-form-field>

</form>

产品.componet.ts：

genders: any = [
    '',
    {
      Code: "M",
      Name: "Male"
    },
    {
      Code: "F",
      Name: "Female"
    },
    {
      Code: "U",
      Name: "Unisex"
    }
  ];
this.productForm.setValue({
     Name : String = 'Test product',
     Gender: String = 'M(Male)'
})

我能够显示产品名称，但无法显示动态绑定的下拉值。我需要使用 Angular 8 动态显示下拉值。

标签： angularangular-material

解决方案

发布的代码中有几处错误：

  1. 您必须使用formControlNamefor 性别控制进行<mat-select>控制：

前任：

                Here
            \/\/\/\/\/\/
<mat-select formControlName="Gender" placeholder="Select Gender" aria-label="Select Gender" (selectionChange)="onGenderSelectionChanged($event)">
  <mat-option *ngFor="let s of genders" [value]="s.Code">
     <span *ngIf="!s.Code"></span>
     <span *ngIf="s.Code"> {{s.Name}}</span>
  </mat-option>
</mat-select>
  1. 虽然为 FormGroup 设置值不需要指定数据类型，并且，
this.productForm.setValue({
  Name : 'Test product',
  Gender: 'M'
});

不是M(Male)完全不同的。from M，用于绑定 matselect 的值。

Working_Demo

推荐阅读