web-dev-qa-db-ja.com

プログラムで<mat-select>の値を設定

2つのフィールドの値を設定しようとしています<input matInput> abnd <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>
angularangular2-formsangular-material2angular5angular-reactive-forms
16
yt61

<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);
15
yt61

Angularはカテゴリフィールドで設定した項目の選択に失敗します。これは、そのオブジェクトとmat-selectで使用可能なすべてのオブジェクトを参照によって比較するため、自分で比較関数を実装し、[ compareWith]属性は次のとおりです。

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

そして、コンポーネントクラスで：

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

これで、項目（複数選択の場合は項目）がフィールドに設定されます。

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

作業サンプル：
https://stackblitz.com/edit/angular-material2-issue-t8rp7j

10
Hany

オブジェクトを使用してこれを実現する方法は、次のようにマークアップを変更することです。

<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;
}
6
joe.coder

ここでは、FormGroup.setValueを使用する必要があると思います。

コードによると、

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

詳細については、 documentation を参照してください

0
NoughT