以编程方式设置 <mat-select> 的值

Question

我正在尝试以编程方式设置 2 个字段 <input matInput> 和 <mat-select> 的值。对于文本输入，一切都按预期工作，但是对于视图上的 <mat-select>，此字段就像它的值 null 一样。但是如果我调用 console.log(productForm.controls['category'].value 它会打印我以编程方式设置的正确值。我错过了什么吗？

代码如下：

表单配置：

productForm = new FormGroup({
    name: new FormControl('', [
        Validators.required
    ]),
    category: new FormControl('', [
        Validators.required
    ]),
});

设置值：

ngOnInit() {
    this.productForm.controls['name'].setValue(this.product.name);
    this.productForm.controls['category'].setValue(this.product.category);
}

html:

<mat-form-field>
    <mat-select [formControlName]="'category'"
                [errorStateMatcher]="errorStateMatcher">
        <mat-option *ngFor="let category of categories" [value]="category">
            {{category.name}}
        </mat-option>
    </mat-select>
</mat-form-field>

Answer 1

通过将 <mat-option> 的值从 category 对象更改为它的 ID 解决了这个问题。

<mat-form-field>
<mat-select [formControlName]="'category'"
        [errorStateMatcher]="errorStateMatcher">
<mat-option *ngFor="let category of categories" [value]="category.id">
    {{category.name}}
</mat-option>
</mat-select>
</mat-form-field>

和设置值：

this.productForm.controls['category'].setValue(this.product.category.id);

Answer 2

使用对象实现此目的的方法是像这样更改标记：

<mat-select [formControlName]="'category'"
        [errorStateMatcher]="errorStateMatcher" [compareWith]="compareFn">
<mat-option *ngFor="let category of categories" [value]="category">
    {{category.name}}
</mat-option>
</mat-select>

然后在组件

compareFn(x: Category, y: Category): boolean {
return x && y ? x.id === y.id : x === y;
}

Answer 3

Angular mat-select 通过引用比较 该对象与 mat-select 中的所有可用对象。结果，它无法 select 您在类别字段中设置的项目。因此，您必须 实现比较函数 以根据需要比较任何列表项的属性，然后将此函数传递给 [compareWith] 属性 的 mat-select.
最后，这是最终标记和脚本的快照：

<mat-form-field>
    <mat-select [formControlName]="category" [compareWith]="compareCategoryObjects">
        <mat-option *ngFor="let category of categories" [value]="category">
            {{category.name}}
        </mat-option>
    </mat-select>
</mat-form-field>

并且在组件class中：

compareCategoryObjects(object1: any, object2: any) {
    return object1 && object2 && object1.id == object2.id;
}

现在它将 select 项目 - 如果有多个 select- 您为该字段设置的项目。

参考：
https://github.com/angular/material2/issues/10214

工作样本：
https://stackblitz.com/edit/angular-material2-issue-t8rp7j

Answer 4

我认为在这里你应该使用 FormGroup.setValue。

根据您的代码，

this.productForm.setValue({
name: this.product.name,
category: this.product.category
});

更多信息请参考documentation

以编程方式设置 <mat-select> 的值

Set value of <mat-select> programmatically

angular2-forms

angular-material2

angular

angular-reactive-forms

angular5