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>
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);
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;
}
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
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