复选框值不出现在表单数组中，角度的 [英] checkbox values not coming in form array, angular

问题描述

当我选中复选框时，其值将显示为另一个数组，并且不会根据for进行更新，用户日仅在员工表单之外时才起作用，当放在员工表单中时如何使它起作用，在技​​巧下[]

when i select check box its value is displayed as another array and does not get updated according to the for,the userdays work only when it is outside the employee form, how do i make it work when put inside the employee form, under skills[]

https://stackblitz.com/edit/angular-cueihr

推荐答案

由于要在每个表单组中添加userdays数组，因此请首先在newEmployee FormGroup中创建控件的userdays数组.

Since you want to add userdays array inside each formgroup, First create userdays array of control inside newEmployee FormGroup.

component.ts

newEmployee(): FormGroup {
    return this.fb.group({
      firstName: '',
      lastName: '',
      repeat_sun: false,
      repeat_mon: false,
      repeat_tue: false,         
      skills:this.fb.array([]),
      userdays: this.fb.array([])
    })
 }

然后从html中传递选定的雇员formGroup索引.

Then pass selected employees formGroup index from html.

<label class="checkbox-inline" *ngFor="let day of days; ">
    <input type="checkbox" formControlName="{{ day.name }}" name="{{ day.name }}"
        (change)="onChange(empIndex,day.value , $event.target.checked)" />{{ day.value }}
</label>

最后根据需要添加逻辑.

Finally add your logic as per your need.

component.ts

onChange(empIndex, day: string, isChecked: boolean) {
    const dayFormArray = (this.empForm.get("employees") as FormArray)
      .at(empIndex)
      .get("userdays") as FormArray;
    if (isChecked) {
      dayFormArray.push(new FormControl(day));
    } else {
      let index = (dayFormArray.value as []).findIndex(item => item === day);
      dayFormArray.removeAt(index);
    }
  }

分叉示例

这篇关于复选框值不出现在表单数组中，角度的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！