0

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.

introducir la descripción de la imagen aquí

Lanza el siguiente error en consola:

introducir la descripción de la imagen aquí

Como se resuelve este tipo de situación?

Gracias por el tiempo dedicado.

2
  • que quieres hacer?. mostrar muchas veces tu select? o solo mostrar el select una sola vez y listar las opciones dentro de 1 solo select? Commented el 19 jun. 2020 a las 23:07
  • Lo que tiene que hacer es seleccionar de una lista de opciones, y puede hacerlo varias veces. Eso funciona bien cuando es uno nuevo. El tema está cuando quiero editar un contacto, no puedo rellenar el select con el valor que ya tenía. Me lanza el error en consola que puse en la imagen.
    – arian
    Commented el 22 jun. 2020 a las 12:32

1 respuesta 1

0

no se como el crear te funciona. quizas esta omitiendo algo de codigo. pero lo que se le pasa al FormArray deberia ser un array de Form Groups. Ejemplo:

const puestos = this.contacto['puesto']; //asumiendo que eso es un array
const array = [];
for (let i = 0; i < puestos.legnth; i++) {
  const child = this._formBuilder.group({
    id: [puestos[i]], // aca puedes setear el valor del puesto o hacerlo despues de crearlo.
  });
  array.push(child);
}
this.puestoFormGroup = this._formBuilder.group({
    puestos: this._formBuilder.array(array)
  });
2
  • Gracias Manuel por responder. Agregué como vos indicaste el código, y lo bueno es que ya no tira errores. Pero no me trae en el mat-select la opción correspondiente. Que me estaría faltando en el HTML?
    – arian
    Commented el 24 jun. 2020 a las 18:42
  • si te fijas donde esta el comentario "// aca puedes setear el valor del puesto o hacerlo despues de crearlo." justo ahi deberias poner el id de la opcion correspondiente. quizas algo como this.contacto['puesto'][i].idPuestoDescripcion Pero dependera de lo que tengas en this.contacto['puesto'] Commented el 24 jun. 2020 a las 20:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.