Question

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

<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>

我正在使用ActivatedRoute中的patchValue更新地区字段值

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

问题在于将值设置为区控制，但mat-select仍显示占位符。

Answer 1

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

更改此行

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

到

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

退房 this 堆积如山。我评论了错误的实现，因此您可以轻松地在两者之间切换，如果绑定了 distrcitID。

设置垫选项值反应形式

1 个答案: