Tengo un campo de entrada donde necesito completar los datos de la matriz que provienen de la API, he usado FormControl para completar los datos pero no puedo lograr lo mismo. Recibo la respuesta en la consola pero no puedo completarla en interfaz de usuario A continuación se muestra mi código, si alguien podría guiarme, ya que pasé 2 días completos y soy nuevo en Angular. ¿Alguien puede ayudarme aquí?
Código HTML:
<div formArrayName="ints" *ngFor="let inCompany of insurance.controls; let i = index"> <div [formGroupName] = "i"> <ion-card *ngFor="let eq of ef;let i=index;"> <ion-item> <ion-input formControlName="iCompany"></ion-input> </ion-item> </ion-card> </div> </div>Código TS:
ionViewWillEnter(){ this.loadData(); } ngOnInit() { this.sForm = this.formBuilder.group({ ints: this.formBuilder.array([]), }) } get ints(): FormArray { return this.sForm.get('ints') as FormArray; } get formGroup(): FormGroup { return this.formBuilder.group({ name: ['justTest'], }); } loadData(){ this.service.getefDetails(data).subscribe((response: any) => { this.ef= response.data; var formArray = this.sForm.get('ints') as FormArray; for (let i = 0; i < this.ef.length; i++) { console.log(this.ef.length, this.ef[i].percentage) var chec=this.ef[i].percentage formArray.push(this.formGroup); formArray.controls[i].patchValue(chec); } )} }Tipo de matriz: [{nombre:"prueba", porcentaje: "29"},{nombre:"abc", porcentaje: "45"}, {nombre:"def", porcentaje: "63"}]
En primer lugar, le sugiero que reconsidere su enfoque como se mencionó en el comentario anterior, parece que lo ha complicado innecesariamente. Además, pensaría en cambiar el nombre de sus variables, es bastante confuso y será difícil mantenerlo más adelante.
Para responder a su pregunta y obtener la "entrada de iones" impresa en la pantalla, realice los siguientes cambios en el HTML.
No puede asignar <div [formGroupName] = "i"> i al formGroup ya que no es del tipo formGroup ya que está asignado al índice.
La solución es asignar <div [formGroupName] = "insuranceCompany[0]"> para que se asigne un grupo de formulario. Nuevamente, sugiero que cambie el nombre de la variable "compañía de seguros" para mayor claridad, ya que también hay un control llamado "compañía de seguros" .
Aquí hay un ejemplo de trabajo de su código menos las etiquetas iónicas. https://stackblitz.com/edit/angular-ivy-b3gtly?file=src/app/app.component.ts
Espero haberme dejado claro, y espero que ayude.
Puede usar patchValue directamente en un control de formulario para hacer esto.
Su configuración actual parece demasiado complicada a menos que haya muchos otros valores en el formulario que no se muestran aquí.
Sin embargo, cuando recibe una respuesta de la API, simplemente puede obtener el elemento de formulario reactivo y establecer el valor.
this.suitablityForm.insurance.insuranceCompany.patchValue('VAL_YOU_WANT');