不能分配FormArray

Question

刚开始学习角和堆叠的问题。我想为表单创建添加/删除文本字段，因此我在component.ts文件中尝试了以下代码：

import {FormBuilder, FormGroup, FormArray } from '@angular/forms';

所以，这是导入的样子，然后

  nameForm: FormGroup;
  formBuilder: FormBuilder;
  items: any[] = [];

  createItem(): FormGroup {
    return this.formBuilder.group({
      name: '',
      manufacture_date: ''
    });
  }
  ngOnInit() {
    this.nameForm = this.formBuilder.group({
      Name: ''
      items: this.formBuilder.array([ this.createItem() ])
    });
  }

  addItem(): void {
    this.items = this.nameForm.get('items') as FormArray;
    this.items.push(this.createItem());
  }

这是HTML

<div formArrayName="items"
     *ngFor="let item of nameForm.get('items').controls; let i = index;">
  <div [formGroupName]="i">
    <input formControlName="name" placeholder="Item name">
    <input formControlName="price" placeholder="Item manufacture date">
  </div>

  Chosen name: {{ nameForm.controls.items.controls[i].controls.name.value }}
</div>

问题是，我在物品上有错误。特别是在这里

addItem():

我收到消息，这是未使用的方法，以及

this.items = this.nameForm.get('items') as FormArray;

我得到了类型，FormArray不能分配给输入any[]。属性“include”在FormArray类型中缺失。

使用HTML，我收到一些标识符“控件”未定义

也许有另一种方法来实现我想要的，但目前还不知道如何处理它。

Answer 1

您应该更改项目类型：items: FormArray ;

在ngOnInit()中：

{
    this.nameForm = this.formBuilder.group({
      Name: ''
      items: this.formBuilder.array([ this.createItem() ])
    });
this.addItem()
  }

更新：--我解析并更新了代码中的错误：

nameForm: FormGroup;
items: FormArray;
constructor(public formBuilder: FormBuilder){}

ngOnInit() {
    this.items = new FormArray([new FormControl('name'), new FormControl('manufacture_date')]);
    this.nameForm = new FormGroup({
        items: this.items
    });

    this.addItem();
    console.log(this.nameForm)
    console.log(this.items.controls);
}

addItem(): void {
    this.items = this.nameForm.get('items') as FormArray;
    this.items.push(new FormControl('name'));
    this.items.push(new FormControl('manufacture_date'));
}

html：

<div [formGroup]="nameForm">
    <div formArrayName="items">
        <div *ngFor="let item of items.controls; index as i">
            <input [formControlName]="i">
            {{item.value}}
        </div>
    </div>
</div>