时间戳

首页 > 解决方案 > 设置 mat-option 值反应形式

typescript - 设置 mat-option 值反应形式

问题描述

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

<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 仍然显示占位符。

标签： typescriptangular-materialangular6

解决方案

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

更改此行

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

至

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

看看 这个 堆栈闪电战。我已经评论了错误的实现，所以你可以很容易地在两者之间切换，如果你绑定 distrcitID.

推荐阅读