web-dev-qa-db-fra.com

Angular FormArray: impossible de trouver le contrôle avec le chemin

J'essaie de construire un Angular formulaire réactif où un compte peut ajouter de nombreux étudiants.

Le formulaire semble fonctionner. Lorsque vous appuyez sur Ajouter un étudiant, il crée un nouvel étudiant, mais vous vérifiez la console, il dit

ERREUR Erreur: impossible de trouver le contrôle avec le chemin: 'StudentsArray -> 1 -> firstName

et ainsi de suite pour chaque contrôle du tableau.

app.component.html 

<form [formGroup]="accountForm">
<div>
    <input formControlName="firstName" placeholder="First name">
</div>
<div>
    <input formControlName="lastName" placeholder="Last name">
</div>
<div>
    <input formControlName="phone" placeholder="Phone">
</div>
<div>
    <input formControlName="email" placeholder="Email">
</div>
<button (click)="addStudent()" *ngIf="!showStudentForm">Add Student</button>
<div formArrayName="studentsArray">
    <div *ngFor="let student of studentsArray.controls; let i = index" [formGroupName]="i">
        <input formControlName="firstName" placeholder="First Name">
        <input formControlName="lastName" placeholder="Last Name">
        <input formControlName="dob" placeholder="Date of Birth">
    </div>
</div>

app.component.ts 

import { Component, Input, OnChanges } from '@angular/core';
import { FormGroup, FormControl, Validators, FormArray, FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
 @Input() account: Account;
  accountForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.createForm();
  }

   createForm() {
    this.accountForm = this.fb.group({
      'firstName': '',
      'lastName': '',
      'email': '',
      'phone': '',
      'studentsArray': this.fb.array([])
    });
   }

   ngOnChanges() {
    this.rebuildForm();
  }

  rebuildForm() {
    this.accountForm.reset({
      firstName: this.account.firstName,
      lastName: this.account.lastName,
      email: this.account.email,
      phone: this.account.phone
    });
    this.setStudents(this.account.students);
  }

  get studentsArray(): FormArray {
    return this.accountForm.get('studentsArray') as FormArray;
  }

  setStudents(students: Student[]) {
    const studentFGs = students.map(student => this.fb.group(student));
    const studentFormArray = this.fb.array(studentFGs);
    this.accountForm.setControl('studentsArray', studentFormArray);
  }

  addStudent() {
    this.studentsArray.Push(this.fb.group(new Student()));
  }
}

export class Account {
  public firstName: '';
  public lastName: '';
  public email: '';
  public phone: '';
  public students: Student[];
}

export class Student {
  firstName: '';
  lastName: '';
  dob: '';
}

https://stackblitz.com/edit/angular-rqvv3a

Toute suggestion sera très appréciée.

angularangular-reactive-formsformarrayformgroups
7
Ty Tran

Méthode 1: exemple de code Dans votre composant:

  addStudent() {
    this.studentsArray.Push(this.fb.group({
      firstName:new FormControl (""),
      lastName: new FormControl (""),
      dob: new FormControl ("")
    }))
  }

Méthode 2: exemple de code Dans votre composant:

import { Student } from './student.model'

 addStudent() {
    this.studentsArray.Push(this.fb.group(new Student()));
  }

Créer un modèle étudiant: nom de fichier: student.model.ts

contenu du fichier:

export class Student{
  constructor(
    public firstName:string,
    public lastName:string,
    public dob:string
  ){}
}

Pour la méthode 1 ou 2:

Dans votre Html:

<div formArrayName="studentsArray" ">
    <div *ngFor="let student of studentsArray.controls; let i = index" formGroupName="{{i}}">
        <input formControlName="firstName" placeholder="First Name">
        <input formControlName="lastName" placeholder="Last Name">
        <input formControlName="dob" placeholder="Date of Birth">
    </div>
</div>

Vous pouvez afficher la valeur du formulaire pour un test facile comme celui-ci:

{{accountForm.value | json}}
2
Farasi78