时间戳

首页 > 解决方案 > Angular 10 FormArray ERROR 错误：找不到具有名称的控件：'[object Object]，[object Object]，[object Object]

angular - Angular 10 FormArray ERROR 错误：找不到具有名称的控件：'[object Object]，[object Object]，[object Object]

问题描述

我正在尝试创建一个显示动态复选框的表单，至少应选中其中一个才能继续。我还需要获得一组选中的复选框。

这是组件中的代码：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormControl, FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.scss']
})
export class ProductsComponent implements OnInit {
  productsForm: FormGroup;
  items = [
    {key: 'key1', text: 'text1'},
    {key: 'key2', text: 'text2'},
    {key: 'key3', text: 'text3'},
  ];
  checkboxGroup = new FormArray(this.items.map(item => new FormGroup({
    id: new FormControl(item.key),
    text: new FormControl(item.text),
    checkbox: new FormControl(false)
  })));

  constructor(private router: Router, private fb: FormBuilder) { }

  
  ngOnInit() {

    let hiddenControl = new FormControl(this.mapItems(this.checkboxGroup.value), Validators.required);

    this.checkboxGroup.valueChanges.subscribe((v) => {
      console.log(v);
      hiddenControl.setValue(this.mapItems(v));
    });

    this.productsForm = new FormGroup({
      items: this.checkboxGroup,
      selectedItems: hiddenControl
    });
    console.log(this.checkboxGroup.controls);
  }

  mapItems(items) {
    let selectedItems = items.filter((item) => item.checkbox).map((item) => item.id);
    return selectedItems.length ? selectedItems : null;
  }

  onSubmit() {
    this.router.navigate(['/result'], { skipLocationChange: true });
  }
}

HTML：

<h3>Select products</h3>
<form [formGroup]="productsForm">
    <div [formArrayName]="items" [class.invalid]="!productsForm.controls.selectedItems.valid">
      <div *ngFor="let control of checkboxGroup.controls; let i = index;" [formGroup]="control">
        <div>
            <input type="checkbox" formControlName="checkbox" id="{{ control.controls.id.value }}">
            <label attr.for="{{ control.controls.id.value }}">{{ control.controls.text.value }}</label>
        </div>
      </div>
    </div>
    <div [class.invalid]="!productsForm.controls.selectedItems.valid" *ngIf="!productsForm.controls.selectedItems.valid">
      Check at least one checkbox!
    </div>
    <hr>
    <pre>{{productsForm.controls.selectedItems.value | json}}</pre>
</form>

在 HTML 中，我之前尝试使用 FormGroup 实例遍历 FormArray 实例，如下所示productsForm.controls.items.controls：但它曾经在编译过程中返回一个错误，如下所示：

“AbstractControl”类型上不存在属性“控件”。

现在我摆脱了那个错误并且项目编译了，但现在它返回了

ERROR 错误：找不到具有名称的控件：'[object Object]，[object Object]，[object Object]

这根本没有帮助。

如果我 console.log checkboxGroup.controls，它会以我想要的方式返回我的复选框。

我正在使用Angular 10。

请帮忙！

标签： angulartypescriptangular-forms

解决方案

本身不能称之为一个好的答案，所以我仍然愿意接受更好的答案，但这会迫使代码工作。

我回来用 进行迭代productsForm.controls.items.controls，但我还创建了一个如下所示的 getter：

 get checkboxControls() {
    // assign type 'any' to this.productsForm.controls.items which previously was 'AbstractControls'
    let checkbox = this.productsForm.controls.items as any
    // now you can magically call the 'controls' property and iterate, congratulations
    return checkbox.controls
  }

在第 4 行的 HTML 中，替换checkboxGroup.controls为我们的新checkboxControlsgetter：

<div *ngFor="let control of checkboxControls; let i = index;" [formGroup]="control">
        <div>
            <input type="checkbox" formControlName="checkbox" id="{{ control.controls.id.value }}">
            <label attr.for="{{ control.controls.id.value }}">{{ control.controls.text.value }}</label>
        </div>
</div>

如果有人想玩，这里有一个演示链接。适用于 Angular 9 和 10。祝你好运！

推荐阅读