web-dev-qa-db-fra.com

Angular 2 Accéder aux FormArrays imbriqués à l'aide de FormBuilder

Tout d'abord, je commence juste par Angular 2 et j'essaie de créer un formulaire imbriqué et de le valider.

Voici une partie de mon fichier ts:

ngOnInit() {
  this.myForm = this.formBuilder.group({
    projects: this.formBuilder.array([
      this.initProjects()
    ])
  });
}

initProjects(): any {
  return this.formBuilder.group({
    name: ['', [Validators.required, Validators.minLength(3)]],
    some_array: this.formBuilder.array([
      this.formBuilder.group({
        name: ['', Validators.required],
        attr: ['', Validators.required],
        some_id: [1, Validators.required]
      })
    ])
  });
}

addProject(): void {
  const control = < FormArray > this.myForm.controls['projects'];
  control.Push(this.initProjects());
}

Vue:

<form [formGroup]="myForm" novalidate (ngSubmit)="onSubmit(myForm)">
  <div formArrayName="projects">
    <div *ngFor="let project of myForm.controls.projects.controls; let i = index">
      <div [formGroupName]="i">
        <md-input placeholder="Name" formControlName="name"></md-input>
      </div>
      <div *ngFor="let some_obj of project.controls.some_array.controls; let x = index">
        <div [formGroupName]="x">
          <div>
            <md-input placeholder="Nome" formControlName="controls.some_array.controls.name"></md-input>
            <small *ngIf="!some_obj.controls.name.valid">
                    Nome é requerido
                  </small>
          </div>
          <md-input type="number" placeholder="Cost" formControlName="controls.some_array.controls.attr" required></md-input>
        </div>
      </div>
    </div>
  </div>
  <button type="submit" md-raised-button color="primary" [disabled]="!myForm.valid">Submit</button>
</form>
<pre>form value: <br>{{myForm.value | json}}</pre>

La sortie de la valeur du formulaire:

form value: 
{
  "projects": [
    {
      "name": "",
      "some_array": [
        {
          "name": "",
          "attr": "",
          "some_id": 1
        }
      ]
    },
    {
      "name": "",
      "some_array": [
        {
          "name": "",
          "attr": "",
          "some_id": 1
        }
      ]
    }
  ]
}

Eh bien, comme vous pouvez le voir, j'ai des tableaux appelés projets, avec un tableau à l'intérieur de chacun.

Le problème est que je ne suis pas en mesure de valider chaque contrôle du tableau some_array.

En fait, j'obtiens l'erreur suivante:

EXCEPTION ORIGINALE: Impossible de trouver le contrôle avec le chemin: 'projects -> 0 -> controls.some_array.controls.name PS: j'ai déjà essayé de le placer dans un div, comme ci-dessous:

Mais j'ai aussi une erreur:

Impossible de trouver le contrôle avec le chemin: 'projets -> some_array' Merci d'avance. Toute aide serait appréciée.

angulartypescriptangular2-forms
8
Deepika Bhandari

Essayez le code HTML suivant:

<form [formGroup]="myForm" novalidate (ngSubmit)="onSubmit(myForm)">
    <div formArrayName="projects">
        <div [formGroupName]="i" *ngFor="let project of myForm.controls.projects.controls; let i = index">
            <md-input placeholder="Name" formControlName="name"></md-input>
            <div formArrayName="some_array">
                <div [formGroupName]="x" *ngFor="let some_obj of project.controls.some_array.controls; let x = index">
                    <div>
                        <md-input placeholder="Nome" formControlName="name"></md-input>
                        <small *ngIf="!some_obj.controls.name.valid">Nome é requerido</small>
                    </div>
                    <md-input type="number" placeholder="Cost" formControlName="attr" required></md-input>
                </div>
            </div>
        </div>
    </div>
    <button type="submit" md-raised-button color="primary" [disabled]="!myForm.valid">Submit</button>
</form>
<pre>form value: <br>{{myForm.value | json}}</pre>
7
Remidy

J'ai rencontré le même problème quand on utilise des crochets autour de formControlName imbriqué. Par exemple (c'est faux):

<div formArrayName="options">
            <ion-row *ngFor="let option of addProductForm.controls.options.controls; index as i;">
              <ion-col no-padding [formGroupName]="i">
                <ion-item>
                  <ion-label floating>Name</ion-label>
                  <ion-input type="text" [formControlName]="option_name"></ion-input>
                </ion-item>
              </ion-col>
            </ion-row>
          </div>

formControlName = "nom_option" doit être SANS crochets

0
Timothy