web-dev-qa-db-fra.com

Définir la valeur de <mat-select> par programme

J'essaie de définir la valeur de 2 champs <input matInput> abnd <mat-select> par programme. Pour la saisie de texte, tout fonctionne comme prévu. Cependant, pour le <mat-select> dans la vue, ce champ est identique à la valeur qu'il aurait pour valeur null. Mais si je voudrais appeler console.log(productForm.controls['category'].value, cela affichera la valeur correcte que j'ai définie par programme. Est-ce que je manque quelque chose?

Voici le code:

formulaire de configuration:

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

valeur de réglage:

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

Résolution de ce problème en modifiant la valeur de <mat-option> de category en son 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>

et valeur de réglage: 

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

Pour ce faire, utilisez des objets pour modifier le balisage de la manière suivante:

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

Puis en composant

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

Angular ne sélectionne pas les éléments que vous avez définis dans le champ catégorie, car il compare par référence l’objet à tous les objets disponibles dans la sélection de tapis. compareWith] comme suit:

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

Et dans la classe de composant:

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

Maintenant, il sélectionnera le ou les éléments si vous sélectionnez plusieurs, vous définissez pour le champ. 

Référence:
https://github.com/angular/material2/issues/10214

Échantillon de travail:
https://stackblitz.com/edit/angular-material2-issue-t8rp7j

2
Hany

Je pense ici que vous devriez utiliser FormGroup.setValue.

Selon votre code,

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

Pour plus d'informations, veuillez vous référer à la documentation

0
NoughT