Angular8 Reactive Forms-当有多个包含这些复选框的表单时，如何处理复选框控件（相同）

Question

我有一个场景，当用户点击+按钮时，相同的表格被复制，所有字段都相同，所以我使用ngFor。我在表格中使用了复选框。 我在使用每种形式的复选框控件时遇到问题，无法获取复选框的值。

现在一种形式就可以了，我们有一个功能

get socialsArray(){ return <FormArray>this.primaryForm.get('socialcontrol'); }

但是当我单击+按钮时，formgroup是动态生成的，但是我无法在“获取功能”上方生成 get socialsArray(){ return <FormArray>this."dynamicallygeneratedformgroup".get('socialcontrol'); } 我为此使用了socialsArray。

HTML：

<label *ngFor="let social of socialsArray.controls;let i=index;" 
class="kt- 
 checkbox">
 <input (change)="updateCheckboxList(secondaryForm)" 
[formControl]="social" 
 type="checkbox" id="secform{{socials[i].name}}"> {{socials[i].name}}
 <span></span>
 </label>

TS：

 this.primaryForm=return this.formBuilder.group({
  firstname:['',Validators.required],
  lastname:['',Validators.required],
  socialcontrol:this.addSocialControls()
})

addSocialControls(){
const arr = this.socials.map(item => {
  return this.formBuilder.control(false);
});
 return this.formBuilder.array(arr);
}

我试图创建一个formgrouparray并将函数重写为

getSocialsArray(formgroup){
return <FormArray>formgroup.get('socialcontrol'); 
}

和html

*ngFor="let social of socialsArray.controls(index);let i=index;" 

但是它返回错误

Answer 1

我了解您有几个“学生”，因此您可以拥有一个FormGroups数组-不是formArray-

primaryForm:FormGroup[]=[]

您真的有一个函数createForm，它返回一个formGroup

createFormGroup():FormGroup{
  return this.formBuilder.group({
    firstname:['',Validators.required],
    lastname:['',Validators.required],
    socialcontrol:this.addSocialControls()
  })
}

要请求formArray，请添加一个索引

get socialsArray(index){
   return <FormArray>this.primaryForm[index].get('socialcontrol');
}

在ngOnInit

ngOnInit()
{
  this.primaryForm.push(this.createFormGroup())
}

还有您的.html

<div *ngFor="let formGroup of primaryForm;let index=index">
   <div [formGroup]="formGroup">
     <input formGroupName="firstname">
     <input formGroupName="lastname">
     <!--here your array, see how use "index"-->
     <label *ngFor="let social of socialsArray(index).controls;let i=index;"
       class="kt-checkbox">
       <!--To know what check, pass as argumnet "index" too-->
       <input (change)="updateCheckboxList(index,secondaryForm)" 
              [formControl]="social" 
           type="checkbox" id="secform{{socials[i].name}}"> {{socials[i].name}}
          <span></span>
     </label>
   </div>
</div>

注意：我不理解您的函数updateCheckboxList（index，secondaryForm）。通常，在ReactiveForms中首选使用

primaryForm[index].get('social').valueChanges
    .subscribe(res=>{
       //here you has the array of values
    })

好吧，真的需要做些类似的事情

ngOnInit()
{
  this.primaryForm.push(this.createFormGroup())
 this.primaryForm[0].get('social').valueChanges
    .subscribe(res=>{
       //here you has the array of values
    })
}

而且，当添加新表单时

addForm()
{
  this.primaryForm.push(this.createFormGroup())
 this.primaryForm[this.primaryForm.length-1].get('social').valueChanges
    .subscribe(res=>{
       //here you has the array of values
    })
}