0
188
ViewsLos datos del JSON no se muestran en las entradas del FormArray
Tengo un JSON y me gustaría enviar los datos de este objeto a FormArray. Solo obtengo el objeto Object que se muestra en la salida. ¿Cuál es la mejor manera de resolver este problema y qué puedo hacer mejor para construir el código?
Mi StackBlitz: https://stackblitz.com/edit/get-data-from-api-and-populate-form-array-with-it-5kjunq?file=src%2Fapp%2Fapp.component.html
Mi código:
// My JSON [ { "currentUser": { "userId": 2, "gender": "Herr", "firstname": "Max", "lastname": "Mustermann", "username": "maxMustermann", "email": "max-mustermann@gmail.com" }, "success": true } ] // My TS userForm: FormGroup; constructor(private fb: FormBuilder, private http: HttpClient) {} ngOnInit() { this.http.get('/assets/data.json').subscribe((resp: any[]) => { const data = resp; if (data && data !== null) { console.log('Output', data); this.userForm = this.fb.group({ userFormArray: this.fb.array( resp.map((param) => this.generateUserFormGroup(param)) ), }); } }); } private generateUserFormGroup(param) { return this.fb.group({ gender: this.fb.control({ value: param.gender }), firstname: this.fb.control({ value: param.firstname }), lastname: this.fb.control({ value: param.lastname }), username: this.fb.control({ value: param.username }), email: this.fb.control({ value: param.email }), }); } // My Template <form [formGroup]="userForm"> <div formArrayName="userFormArray"> <div *ngFor=" let control of userForm.controls['userFormArray'].controls; let i = index " > <div [formGroupName]="i"> <input type="text" formControlName="gender" /> <input type="text" formControlName="firstname" /> <input type="text" formControlName="lastname" /> <input type="text" formControlName="username" /> <input type="text" formControlName="email" /> </div> </div> </div> </form>2 answers
Answer question0
Divulgación: no soy un desarrollador de Angular, no estoy seguro de si el uso del new FormControl tiene consecuencias.
En primer lugar, param es un objeto que contiene otro objeto llamado currentUser : hubo un intento de llegar a campos inaccesibles.
Seguí sus documentos, parece hacer el trabajo -
private generateUserFormGroup(param) { const { currentUser } = param; return this.fb.group({ gender: new FormControl(currentUser.gender), firstname: new FormControl(currentUser.firstname), lastname: new FormControl(currentUser.lastname), username: new FormControl(currentUser.username), email: new FormControl(currentUser.email) }); } } 
0
El control FormBuilder toma un objeto que contiene un valor predeterminado y un estado deshabilitado o simplemente el valor predeterminado, así que actualice su método de generación de formulario de esta manera:
private generateUserFormGroup(param) { return this.fb.group({ gender: this.fb.control(param.gender), email: this.fb.control({ value: param.email, disabled: false }), }); } Y donde está llamando a esta función, debe pasar el currentUser
this.generateUserFormGroup(data[0].currentUser)mira esto