使用formArray时，我收到此错误："ModalDialogComponent.html:6 ERROR TypeError: Cannot read property 'controls'

Question

我想使用角度的反应式形式添加动态元素。我正在关注此链接：https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/。

我正在做与该链接完全相同的操作。但是我得到了错误。下面是代码：

TS 文件：

orderForm: FormGroup;
items: FormArray;

constructor(private formBuilder: FormBuilder ) { }
ngOnInit() {
    this.orderForm = this.formBuilder.group({
      iems: this.formBuilder.array([ this.createItem() ])
    })
  }
createItem(): FormGroup {
    return this.formBuilder.group({
      checked: ''
    })
  }
addDynamicCheckBox() {
    this.items = this.orderForm.get('items') as FormArray;
    this.items.push(this.createItem());
  }

模板文件：

<div [formGroup]="orderForm">
        {{ orderForm.controls.items.controls }}
      <div class="row" formArrayName="items" *ngFor="let item of orderForm.get('items').controls; let i=index">
        <div class="col-10" [formGroupName]="i">
          <mat-checkbox formControlName="checked"></mat-checkbox>
        </div>
        <div class="col-2" style="float: right">
          <button mat-raised-button>Remove</button>
        </div>
      </div>
    </div>

编辑

我想设置 formArray 控件的值。我看不到任何价值。仅显示复选框。我制作的以下代码：

TS 文件

setCheckBoxValue() {
    this.items = this.orderForm.get('items') as FormArray;
    this.data.data.forEach((element) => {
      this.items.push(this.formBuilder.group({
        checked: true,
        selected: element
      }))
    });
  }

网页文件

<div [formGroup]="orderForm">
      <div class="row" formArrayName="items" *ngFor="let item of orderForm.get('items').controls; let i=index">
        <div class="col-8" [formGroupName]="i">
          <mat-checkbox formControlName="checked">{{item.checked}}</mat-checkbox>
        </div>
      </div>
      check box value: {{ orderForm.get('items').controls.checked }}
    </div>
``

Answer 1

您的代码中似乎有一个拼写错误 iems -> 项。请参阅更新的答案

TS 文件

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  orderForm: FormGroup;
  items: FormArray;
  constructor(private formBuilder: FormBuilder) { }
  ngOnInit() {
    this.orderForm = this.formBuilder.group({
      items: this.formBuilder.array([this.createItem()])
    })
  }
  createItem(): FormGroup {
    return this.formBuilder.group({
      checked: true
    })
  }
  addDynamicCheckBox() {
    this.items = this.orderForm.get('items') as FormArray;
    this.items.push(this.createItem());
  }
  setCheckBoxValue() {
    this.items = this.orderForm.get('items') as FormArray;
    this.items.push(this.formBuilder.group({
      checked: true,
    }))
  }
}

模板

<div [formGroup]="orderForm">
    <div class="row" formArrayName="items" *ngFor="let item of orderForm.get('items').controls; let i=index">
        <div class="col-8" [formGroupName]="i">
            <input type="checkbox" formControlName="checked" />
        I'm {{item.controls.checked.value === true ? "Checked" : "Unchecked"}}
      </div>
    </div>
    <button (click)="setCheckBoxValue()">Add</button>
  </div>