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

Question

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

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

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'}]

我创建了一个 function 来创建表单

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);
  }

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

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

Answer 1

我认为最适合您的情况是使用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],
        name: [null],
        service_item_id: [serviceItenId]
      })
    );
  }

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

看演示

Answer 2

我想你想做类似的事情

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

删除也是一样