Estoy tratando de establecer el valor de 2 campos <input matInput> y <mat-select> programáticamente. Para la entrada de texto, todo funciona como se esperaba, sin embargo, para <mat-select> en la vista, este campo es como si tuviera un valor null . Pero si llamara a console.log(productForm.controls['category'].value , imprime el valor correcto que configuré mediante programación. ¿Me estoy perdiendo algo?
Aquí está el código:
configuración de formulario:
productForm = new FormGroup({ name: new FormControl('', [ Validators.required ]), category: new FormControl('', [ Validators.required ]), });fijando el valor:
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>El mat-select angular compara por referencia entre ese objeto y todos los objetos disponibles en el mat-select . Como resultado, no puede seleccionar los elementos que configuró en el campo de categoría. En consecuencia, debe implementar la función de comparación para comparar cualquiera de los atributos de los elementos de la lista como desee, y luego pasar esta función al atributo [compareWith] de mat-select .
Para concluir, aquí hay una instantánea del marcado final y el guión:
<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>Y en la clase de componentes:
compareCategoryObjects(object1: any, object2: any) { return object1 && object2 && object1.id == object2.id; }Ahora seleccionará el elemento, o los elementos si se seleccionan varias veces, que configuró para el campo.
Referencia:
https://github.com/angular/material2/issues/10214
Muestra de trabajo:
https://stackblitz.com/edit/angular-material2-issue-t8rp7j
Se resolvió este problema cambiando el valor de <mat-option> del objeto de category a su 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>y valor de configuración:
this.productForm.controls['category'].setValue(this.product.category.id);La forma en que puede lograr esto usando objetos es cambiar el marcado de esta manera:
<mat-select [formControlName]="'category'" [errorStateMatcher]="errorStateMatcher" [compareWith]="compareFn"> <mat-option *ngFor="let category of categories" [value]="category"> {{category.name}} </mat-option> </mat-select>Luego en componente
compareFn(x: Category, y: Category): boolean { return x && y ? x.id === y.id : x === y; }