Angular8 Reactive Forms -Как обрабатывать флажки управления (одинаковые), когда есть несколько форм, имеющих эти флажки внутри

Question

У меня есть сценарий. Когда пользователь нажимает кнопку «+», повторяется та же форма. Все поля одинаковы, поэтому я использую ngFor. Я использовал флажки в форме. У меня есть проблема с элементами управления флажками в каждой форме, получение значений флажков.

Теперь для одной формы все в порядке, у нас есть одна функция

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

Но когда я нажимаю кнопку +, формируется группа динамически, но я не могу сгенерировать выше "get function", как 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);
}

Я попытался создать форму группы и переписать функцию как

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, secondForm). В целом, в 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
    })
}