Question

刚开始学习Angular并堆积了一个问题。我想为表单创建添加/删除文本字段，因此我在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;

我得到 Type FormArray不能指定为任何[]类型。 FormArray类型中缺少属性“includes”

使用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>

无法分配FormArray

1 个答案: