角度反应形式复选框答案

【问题标题】：angular reactive form checkboxes角度反应形式复选框
【发布时间】：2019-04-03 05:03:12
【问题描述】：

我正在构建一个页面，反应式表单，它将显示一个复选框列表，列表中的一些项目必须根据收到的数据进行检查。

数据来自 2 个不同的数组，一个包含所有复选框（RULE_LOOKUP_ID，DESCRIPTION），另一个只是之前检查的 id 列表（“RULE_IDS”：[1, 3]）。

假设我没有正确设置表单，我在显示它时遇到了一些问题。

我正在构建一个表单组：

  this.ruleAssignmentFormGroup = this.formBuilder.group({
  RULE_LOOKUP_ID: this.detail.RULE_LOOKUP_ID,
  TITLE: new FormControl(this.detail.TITLE),
  checkedRules: this.formBuilder.array([]),
  allRules: []
});

已检查的规则将包含已检查的规则的 ID，而 allRules 将包含所有内容。

填充它：

        let control = <FormArray>this.ruleAssignmentFormGroup.controls.checkedRules;
    foundItem.RULE_IDS.forEach(x => {
      control.push(this.formBuilder.group({
        RuleLookupChkBox: new FormControl(x),
      }));
    });

我的表格如下：

  <form [formGroup]="ruleAssignmentFormGroup" autocomplete="false" novalidate class="form-horizontal">
<div class="card-body form-styles">
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label>{{ruleAssignmentFormGroup.controls['TITLE'].value}}</label>
      </div>
      <div formArrayName="checkedRules">
        <div class="form-group">
          <div *ngFor="let item of ruleAssignmentFormGroup.get('allRules'); let i=index">
            <div [formGroupName]="i">
              <input type="checkbox" formControlName="RuleLookupChkBox" [value]="item.RuleLookupId">{{item.DESCRIPTION}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

表单出现时会抛出错误：

找不到“object”类型的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。

和

找不到带有路径的控件：'checkedRules -> 1'

找不到带有路径的控件：'checkedRules -> 1 -> RuleLookupChkBox'

数据看起来在 ruleAssignmentFormGroup 中正确填充。还有其他方法可以让它工作吗？

【问题讨论】：

可能你的意思是 ngFor 中的ruleAssignmentFormGroup.get('allRules').controls

标签： angular

【解决方案1】：

您需要将 allRules 作为 FormArray 启动：this.formBuilder.array([])
我会在表单标签上放一个 *ngIf 以确保它不会在数据返回之前尝试呈现
- 建议：`*ngIf="foundItem && foundItem.RULE_IDS" 或者您可以在 API 调用结束时设置一个布尔值并在 *ngIf 中引用该属性
ruleAssignmentFormGroup.get('allRules') 将返回 AbstractControl 的一个实例。您需要 *ngFor 在它的控件上，这是一个数组。
- 建议：*ngFor="let item of ruleAssignmentFormGroup.controls.allRules.controls"

【讨论】：