Question

我正在使用Angular（v 6.1.3），并且正在使用带有复选框输入的FormControl，但是，当我单击复选框时，完整表单的值不会改变。表单的结构有点复杂，因为我将FormGroup与FormArray一起使用。

代码如下： Component.ts

  export class BusinessFilterComponent implements OnInit {
  businessFilterForm: FormGroup;
  ......... some other code 

  ngOnInit() {
    ......... some other code

    this.businessFilterForm = new FormGroup({
        "branchesTypes": new FormArray([]),
        "corporatesForms": new FormArray([]),
        "employeesRange": new FormArray([]),
        "revenuesRange": new FormArray([])
    });

    for(let k in branchesTypes){
      let control = new FormGroup({
        id : new FormControl(branchesTypes[k].id),
        description : new FormControl(branchesTypes[k].description),
        selected : new FormControl(true)
      });
      (<FormArray>this.businessFilterForm.get('branchesTypes')).controls.push(control);
    }

    for(let k in corporatesForms){
      let control = new FormGroup({
        id : new FormControl(corporatesForms[k].id),
        description : new FormControl(corporatesForms[k].description),
        selected : new FormControl(true)
      });
      (<FormArray>this.businessFilterForm.get('corporatesForms')).controls.push(control);
    }

    for(let k in employeesRange){
      let control = new FormGroup({
        id : new FormControl(employeesRange[k].id),
        description : new FormControl(employeesRange[k].description),
        selected : new FormControl(true)
      });
      (<FormArray>form.get('employeesRange')).controls.push(control);
    }

    for(let k in revenuesRange){
      let control = new FormGroup({
        id : new FormControl(revenuesRange[k].id),
        description : new FormControl(revenuesRange[k].description),
        selected : new FormControl(true)
      });
      (<FormArray>this.businessFilterForm.get('revenuesRange')).controls.push(control);
    }
    ....... some other code

  }

  getBranchesTypes() {
    return (<FormArray>this.businessFilterForm.get('branchesTypes')).controls;
  }

  getCorporatesForms() {
    return (<FormArray>this.businessFilterForm.get('corporatesForms')).controls;
  }

  getEmployeesRange() {
    return (<FormArray>this.businessFilterForm.get('employeesRange')).controls;
  }

  getRevenuesRange() {
    return (<FormArray>this.businessFilterForm.get('revenuesRange')).controls;
  }

}

Component.html

    <form class="form-filtri" [formGroup]="businessFilterForm" *ngIf="businessFilterForm">
  <div class="form-group">
    <label>Tipo di azienda</label>
    <ul class="categorie-selezione" formArrayName="branchesTypes">
                <li *ngFor="let branchType of getBranchesTypes(); let i = index" [formGroupName]="i">
          <input type="checkbox" formControlName="selected" id="branchType{{ branchType.get('id').value }}" class="cursor-pointer">
          <label for="branchType{{ branchType.get('id').value }}" class="cursor-pointer">&nbsp;{{ branchType.get('description').value }} </label>
                </li>
        </ul>
  </div>
  <div class="form-group">
    <label>Forma di azienda</label>
    <ul class="categorie-selezione" formArrayName="corporatesForms">
                <li *ngFor="let corporateForm of getCorporatesForms(); let i = index" [formGroupName]="i">
          <input type="checkbox" formControlName="selected" id="corporateForm{{ corporateForm.get('id').value }}" class="cursor-pointer">
          <label for="corporateForm{{ corporateForm.get('id').value }}" class="cursor-pointer">&nbsp;{{ corporateForm.get('description').value }} </label>
                </li>
        </ul>
  </div>
  <div class="form-group">
    <label>Numero di dipendenti</label>
    <ul class="categorie-selezione" formArrayName="employeesRange">
                <li *ngFor="let employeeRange of getEmployeesRange(); let i = index" [formGroupName]="i">
          <input type="checkbox" formControlName="selected" id="employeeRange{{ employeeRange.get('id').value }}" class="cursor-pointer">
          <label for="employeeRange{{ employeeRange.get('id').value }}" class="cursor-pointer">&nbsp;{{ employeeRange.get('description').value }} </label>
                </li>
        </ul>
  </div>
  <div class="form-group">
    <label>Fatturato</label>
    <ul class="categorie-selezione" formArrayName="revenuesRange">
                <li *ngFor="let revenueRange of getRevenuesRange(); let i = index" [formGroupName]="i">
          <input type="checkbox" formControlName="selected" id="revenueRange{{ revenueRange.get('id').value }}" class="cursor-pointer">
          <label for="revenueRange{{ revenueRange.get('id').value }}" class="cursor-pointer">&nbsp;{{ revenueRange.get('description').value }} </label>
                </li>
        </ul>
  </div>
</form>

当我使用复选框做一些事情时，最后我执行this.businessFilterForm.value，所有复选框的值都与初始时间相同（当我将true设置为FormControl（true）value时）

我迷失了方向，寻找问题所在以及可能的解决方案，但是我陷入了困境。有人可以帮我吗？

非常感谢您

Angular6 FormControl复选框不会更新FormGroup值

0 个答案: