设置 mat-option 值反应形式

【问题标题】：setting mat-option value reactive form设置 mat-option 值反应形式
【发布时间】：2019-09-21 07:43:29
【问题描述】：

我正在使用响应式表单，我的表单字段如下所示。

<mat-form-field>
   <mat-select  placeholder="Select District" formControlName="district" required>
       <mat-option
           *ngFor="let district of districts"
            [value]="district.districtID" >
           {{ district.districtID}} - {{ district.districtName}} 
       </mat-option>
   </mat-select>
</mat-form-field>

我正在激活路由中使用 patchValue 更新区字段值

this.activatedRoute.queryParams.subscribe(    
    params => {
         this.myForm.controls['district'].setValue(params['district']);
})

问题在于将值设置为区域表单控件，但 mat-select 仍然显示占位符。

【问题讨论】：

标签： typescript angular-material angular6

【解决方案1】：

您正在将districtID 属性绑定为模板中mat-select / mat-option 的值，但您正在尝试将整个地区对象与setValue 绑定。

改变这一行

this.myForm.controls['district'].setValue(params['district']);

到

this.myForm.controls['district'].setValue(params['district'].districtID);

退房 this 堆栈闪电战。我评论了错误的实现，所以你可以轻松在两者之间切换，如果绑定 distrcitID.

【讨论】：