Góc 2 Truy cập vào FormArrays lồng nhau bằng FormBuilder

Question

Trước hết tôi chỉ bắt đầu với Angular 2 và tôi đang cố gắng xây dựng một hình thức lồng nhau và xác nhận nó.

Dưới đây là một phần của tập tin ts của tôi:

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

Xem:

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

Kết quả của giá trị dạng:

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

Vâng, như bạn có thể thấy tôi có một số mảng được gọi là dự án, với 1 mảng bên trong mỗi dự án.

Vì vậy, vấn đề là tôi không thể xác thực từng điều khiển mảng some_array.

Trên thực tế tôi nhận được lỗi sau:

EXCEPTION ORIGINAL: Không thể tìm thấy điều khiển với đường dẫn: 'dự án -> 0 -> controls.some_array.controls.name PS: Tôi đã cố gắng đặt nó trong một div, như sau:

Nhưng tôi cũng đã nhận ra lỗi:

không thể tìm thấy điều khiển với đường dẫn: 'dự án -> some_array' Cảm ơn trước. Bất kỳ trợ giúp sẽ được đánh giá cao.

Answer 1

Thử HTML sau:

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