Angular 在表单数组（被动表单）中添加和删除输入字段

我有一个局部变量，其中后端数据作为数组接收，如下所示：

itemsFromBackend: ["Item1", "Item2"]

创建新数组

items: FormArray

在formgroup中：

ngOnInit() {
  this.form = this.formBuilder.group({
    items: this.formBuilder.array([ this.createItem() ])
  });
}

创建项目

createItem(): FormGroup {
  return this.formBuilder.group({
    name: ''
  });
}

添加项目：

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

在HTML中

<div formArrayName="items" *ngFor="let item of form.get('items').controls; let i = index ">
      <div *ngFor="let item of itemsFromBackEnd" [formGroupName]="i">
        <input value={{item}} />
        <section>
            <button
              mat-raised-button
              color="primary"
              type="button"
              (click)="addItem()"
            >
              <i class="material-icons"> add </i>
            </button>
          </section>
      </div>
    </div>

添加

---

我现在收到两个带有后端值的字段，但是当我单击add按钮时，它应该会显示一个新的输入字段，但是它正在添加另外两个带有后端值的输入字段。当我点击add按钮时，我需要一些帮助来显示一个新的输入字段。谢谢。

通过这些更改，它将按照您的要求运行

html:

添加

ts:

itemsfrombend=['Item1'，'Item2']；
表格：表格组；
构造函数（私有formBuilder:formBuilder）{}
恩戈尼尼特（）{
this.form=this.formBuilder.group({
项：this.formBuilder.array（[]）
});
this.itemsfrombend.forEach（i=>this.addItem（i））；
}
getItems（）{
return（this.form.get（'items'））.controls；
}
itemValue（项目：任何）{
返回item.controls.value.value；
}
createItem（名称？：字符串）：FormGroup{
返回此.formBuilder.group({
值：名称？名称：“”
});
}
附加项（名称？：字符串）：无效{
const items=this.form.get（'items'）作为FormArray；
items.push（this.createItem（name））；
}

<div [formGroup]="form">
  <div formArrayName="items" *ngFor="let item of getItems(); let i = index">
    <input value="{{ itemValue(item) }}" />
  </div>
  <section>
    <button mat-raised-button color="primary" type="button" (click)="addItem()">
     <i class="material-icons"> add </i>
    </button>
  </section>
</div>

itemsFromBackEnd = ['Item1', 'Item2'];
form: FormGroup;

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
  this.form = this.formBuilder.group({
    items: this.formBuilder.array([])
  });

  this.itemsFromBackEnd.forEach(i => this.addItem(i));
 }

 getItems() {
   return (<FormArray>this.form.get('items')).controls;
 }

 itemValue(item: any) {
   return item.controls.value.value;
 }

 createItem(name?: string): FormGroup {
   return this.formBuilder.group({
     value: name ? name : ''
   });
}

addItem(name?: string): void {
   const items = this.form.get('items') as FormArray;
   items.push(this.createItem(name));
}