Model Driven Mẫu lồng FormArray kiểm soát trong một điều khiển FormGroup

Question

Tôi có một nhóm hình thức như vậy:

this.form = fb.group({ 
    'teacher': [''], 
    'schools': fb.array([ 
     fb.group({ 
     'school_name': [''], 
     'school_description': [''], 
     'events': fb.array([ 
      fb.group({ 
      'event_name': [''] 
      }) 
     ]) 
     }) 
    ]) 
}); 
const control = (<FormArray>this.form.controls['schools']).controls[0]['events']; 

Làm thế nào để có được sự kiểm soát mảng lồng nhau 'sự kiện'?

const control = (<FormArray>this.form.controls['schools']).controls[0]['events']; 

Answer 1

tôi khuyên bạn nên có một cái nhìn tại 2 ví dụ kiễu góc cho nested form array và nested form group để xem cách tạo các biểu mẫu phức tạp. Với FormGroup, bạn có thể sử dụng .get(name: string) để truy xuất điều khiển. Ví dụ này được kiểm soát schools FormArray:

this.form.get('schools') 

Đối FormArray, bạn có thể lấy một điều khiển từ mảng sử dụng .at(index: number). Ví dụ này được kiểm soát FormGroup đầu tiên trong mảng:

this.schools.at(0) 

Để đặt nó tất cả cùng nhau, có đẹp hơn (đọc: tái sử dụng nhiều dễ đọc hơn,) cách để bày tỏ điều này, nhưng chuỗi này sẽ giúp bạn có sự kiện đầu tiên từ trường học đầu tiên của bạn:

this.form.get('schools').at(0).get('events') 

Đây là ví dụ plnkr đang hoạt động.

Answer 2

Bạn nên sử dụng mã này:

 let listForm: any; 
     var subFormGroup = new FormGroup({}); 
     subFormGroup.addControl("Your Controll Name", new FormControl('',res["Required"] ? Validators.required : null)) 

     listForm = this.builder.array([ 
     subFormGroup 
     ]); 
     this.form.addControl("Your new ArrayControll Name", listForm); 

Khi bạn có một mảng của Object, bạn có thể sử dụng:

let listForm: any; 
var controlItems =[Your Object Array]; 
var subFormGroup = new FormGroup({}); 
Object.keys(controlItems).forEach(function(key){ 
    subFormGroup.addControl(controlItems[key], new FormControl('',res["Required"] ? Validators.required : null)) 
    }) 
listForm = this.builder.array([ 
    subFormGroup 
]); 
this.form.addControl("Your new ArrayControll Name", listForm); 

Answer 3

Trong trường hợp bạn muốn thay đổi một giá trị cho một FormArray lồng nhau, đối với tôi làm việc này:

(<FormArray>this.formModel.controls['schools']).at(el).patchValue({school_name:'your new value'});

el là yếu tố chỉ số mà một trong những bạn muốn áp dụng giá trị vá.