Question

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

数据进入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>

表单出现时会引发错误：

找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到数组等Iterable。

和

找不到具有以下路径的控件：“ checkedRules-> 1”

找不到具有以下路径的控件：“ checkedRules-> 1-> RuleLookupChkBox”

看起来该数据已正确填充到ruleAssignmentFormGroup中。还有另一种方法可以使它工作吗？

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

角反应形式复选框

1 个答案: