Angular 2 Zugriff auf verschachtelte FormArrays mit FormBuilder

Question

Zunächst einmal beginne ich einfach mit Angular 2 und ich versuche, eine verschachtelte Form zu erstellen und zu validieren.

Hier ist ein Teil meiner ts-Datei:

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()); 
} 

Ausblick:

<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> 

Der Ausgang des Formwert:

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

Nun, wie Sie habe ich einige Arrays sehen Projekte genannt, mit jeweils einem Array.

Also das Problem ist, dass ich nicht in der Lage bin, jedes Steuerelement von some_array Array zu validieren.

Ich erhalte die folgenden Fehler Eigentlich:

ORIGINAL AUSNAHME: Kontrolle kann nicht mit Pfad: ‚Projekte -> 0 -> controls.some_array.controls.name PS: Ich habe es schon versucht, in setzen ein div, wie unten:

Aber ich habe auch einen Fehler:

Steuerelement kann nicht mit Pfad: ‚Projekte -> some_array‘ Vielen Dank im Voraus. Jede Hilfe wäre willkommen.

Answer 1

Versuchen Sie das folgende HTML:

<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>