Tengo el siguiente inconveniente. Tengo un MatSelect que carga el MatOption desde un Array de objetos con la siguiente estructura:
export class PuestosOptions {
idPuestoDescripcion: number;
nombrePuesto: string;
}
El HTML tiene la siguiente estructura:
<form [formGroup]="puestoFormGroup">
<p>Puestos</p>
<div formArrayName="puestos">
<div *ngFor="let item of puestosArray.controls; let i=index">
<div [formGroupName]="i">
<mat-form-field>
<mat-label>Puesto</mat-label>
<mat-select formControlName="id">
<mat-option *ngFor="let item of puestosList" [value]="item.idPuestoDescripcion">{{ item.nombrePuesto }}</mat-option>
</mat-select>
</mat-form-field>
<button mat-button color="warn" style="text-align: right;" (click)="deleteItemPuestos(i)"><mat-icon>delete</mat-icon></button>
</div>
</div>
</div>
</form>
En mi Javascript tengo definido el componente de la siguiente manera:
ngOnInit(): void {
this.get_ContactosDescripcion(); //Traigo el arreglo de id y descipciones de los puestos
if(formularioNuevo == true){
//Este if es cuando el formulario es nuevo, y está vacio.
this.puestoFormGroup = this._formBuilder.group({
puestos: this._formBuilder.array([])
});
}else{
//Este else es cuando el formulario esta abierto en modo edición
this.puestoFormGroup = this._formBuilder.group({
puestos: this._formBuilder.array(this.contacto['puesto'])
});
}
}
get puestosArray(): FormArray{
return this.puestoFormGroup.get('puestos') as FormArray;
}
Cuando es un nuevo formulario, anda todo bien. El problema es cuando quiero hacer una edición, y no puede seleccionar el mat-option con los datos correspondiente.
Lanza el siguiente error en consola:
Como se resuelve este tipo de situación?
Gracias por el tiempo dedicado.