angular 7 反应式表单：为表单中的每个输入字段动态添加/删除输入字段

问题描述

我必须使用从服务器接收到的数据动态创建一个表单，并可选择为每个现有输入字段添加和删除输入字段。

这是我从服务器收到的数据

documents = [{id: 1,service_item_id: 311101,name: 'document 1'},{id: 2,service_item_id: 311102,name: 'document 2'},{id: 3,service_item_id: 311103,name: 'document 3'},{id: 4,service_item_id: 311104,name: 'document 4'}]

我已经创建了一个函数来创建表单

createControls(controls) {
    console.log(controls);
    for (let control of controls) {
        const newFormControl = new FormControl();
        this.myForm.addControl(control.service_item_id,newFormControl);
    }
}

this.createControls(this.documents);

在 Html 中我创建了这个

<form [formGroup]="myForm" (ngSubmit)="submitForm()">
    <div *ngFor="let c of documentation; let index = index">
        <label>
            {{ c.name}}
        </label>
        <input type="number" [formControlName]="c.service_item_id" [placeholder]="c.name" />
        <button class="btn btn-primary btn-sm" (click)="add(c.service_item_id)">Add</button>
        <button class="btn btn-primary btn-sm" (click)="remove(c.service_item_id,index)">Remove</button>
    </div>
    <button type="submit" class="btn btn-primary btn-small">Submit</button>
</form>

我的添加和删除功能是

add(item): void {
    (this.myForm.get(item) as FormArray).push(
      this.fb.control(null)
    );
  }

  remove(item,index) {
    (this.myForm.get(item) as FormArray).removeAt(index);
  }

仅创建表单，但添加和删除按钮不起作用。

请帮我解决这个问题。 提前致谢

解决方法

我认为最适合您的情况是使用 FormArray。使用 FormArray，您可以像使用普通数组一样推送和删除项目

  myForm = this.fb.group({
    documents: this.fb.array([])
  });

  get documentsControl(): FormArray {
    return this.myForm.get("documents") as FormArray;
  }
  documents = [
    { id: 1,service_item_id: 311101,name: "document 1" },{ id: 2,service_item_id: 311102,name: "document 2" },{ id: 3,service_item_id: 311103,name: "document 3" },{ id: 4,service_item_id: 311104,name: "document 4" }
  ];
  ngOnInit() {
    this.documents.forEach(document =>
      this.documentsControl.push(
        this.fb.group({
          id: [document.id],name: [document.name],service_item_id: [document.service_item_id]
        })
      )
    );
  }
  constructor(private fb: FormBuilder) {}
  submitForm() {}
  add() {
    this.documentsControl.push(
      this.fb.group({
        id: [null],name: [null],service_item_id: [null]
      })
    );
  }
  remove(index) {
    this.documentsControl.removeAt(index);
  }

添加项目我们使用 push 而删除项目我们使用 removeAt

下面是html

<form [formGroup]="myForm" (ngSubmit)="submitForm()">
    <ng-container formArrayName='documents'>
      <div *ngFor="let c of documentsControl.controls; let index = index" [formGroupName]='index'>
        <label>
            {{ c.value.name}}
        </label>
        <input type="number" formControlName="service_item_id" placeholder="name" />
        <button class="btn btn-primary btn-sm" (click)="add()">Add</button>
        <button class="btn btn-primary btn-sm" (click)="remove(index)">Remove</button>
    </div>
    </ng-container>
    <button type="submit" class="btn btn-primary btn-small">Submit</button>
</form>

编辑

要在点击按钮下方添加项目，我们可以实现 insert()

  insert(index) {
    const serviceItenId = this.documentsControl.controls[index].get('service_item_id').value
    this.documentsControl.insert(
      index + 1,this.fb.group({
        id: [null],service_item_id: [serviceItenId]
      })
    );
  }

我已经更新了下面的演示以反映这一点

See Demo

,

我认为你想做类似的事情

(this.myForm.controls as FormArray).push(this.fb.control(/*your item*/)

删除也是一样的