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

Question

我有一个场景。当用户单击 + 按钮时，会复制相同的表单。所有字段都是相同的，所以我使用 ngFor。我在表单中使用了复选框。我对每个表单中的复选框控件都有问题，获取复选框的值。

现在对于一种形式没关系，我们有一个功能

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

但是当我单击 + 按钮时，formgroup 是动态生成的，但我不能像 get socialsArray(){ return <FormArray>this."dynamicallygeneratedformgroup".get('socialcontrol'); } 我使用 socialsArray 那样在“get function”上方生成。

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

但它返回错误

标签： angularformsangular-reactive-forms

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