web-dev-qa-db-de.com

Legen Sie den Wert für <mat-select> programmgesteuert fest

Ich versuche, den Wert von 2 Feldern <input matInput> abnd <mat-select> programmgesteuert festzulegen. Bei der Texteingabe funktioniert alles wie erwartet, aber für den <mat-select> in der Ansicht ist dieses Feld genauso, als hätte es den Wert null. Wenn ich jedoch console.log(productForm.controls['category'].value aufrufen würde, wird der korrekte Wert ausgegeben, den ich programmgesteuert eingestellt habe. Fehlt mir etwas?

Hier ist der Code:

form config:

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

einstellungswert:

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>

5
yt61

Dieses Problem wurde behoben, indem der Wert von <mat-option> von category in seine ID geändert wurde.

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

und Einstellwert: 

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

Sie können dies mithilfe von Objekten erreichen, indem Sie die Markierung wie folgt ändern:

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

Dann in der Komponente

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

Angular kann die Elemente, die Sie im Feld "Kategorie" festgelegt haben, nicht auswählen, da zwischen diesem Objekt und allen verfügbaren Objekten im mat-select ein Vergleich erfolgt. Daher müssen Sie die Vergleichsfunktion selbst implementieren und sie im [ compareWith] -Attribut wie folgt:

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

Und in der Komponentenklasse:

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

Nun wird das Element ausgewählt - oder Elemente, wenn Sie mehrere Elemente für das Feld auswählen. 

Referenz:
https://github.com/angular/material2/issues/10214

Arbeitsprobe:
https://stackblitz.com/edit/angular-material2-issue-t8rp7j

2
Hany

Ich denke, hier sollten Sie FormGroup.setValue verwenden.

Gemäß Ihrem Code

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

Weitere Informationen finden Sie in der Dokumentation

0
NoughT