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

Posted 2023-03-13

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

【英文标题】：angular 7 reactive forms: dynamically add / remove input fields for each input field in the form

【发布时间】：2021-06-23 19:46:19

【问题描述】：

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

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

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

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

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

【参考方案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]
      )
    );
  

我已更新以下 Demo 以反映这一点

See Demo

【讨论】：

感谢 Owen，但输入字段已添加到页面末尾。有没有办法在点击的项目正下方添加它

service_item_id 为空，有没有办法在插入函数中复制它。提前感谢您的帮助

@Exsite 查看更新的插入函数()

【参考方案2】：

我认为你想做类似的事情

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

删除也是如此