如何从子表单本身中删除嵌套的子表单？

Question

我有一个包含 formArray 的父表单，我可以通过单击调用

addForm()

:

的按钮动态附加额外的 formGroups

ngOnInit() {
  this.signupForm = this.formBuilder.group({
    formList: this.formBuilder.array([this.formListGroupDef()]),
  });
}

formListGroupDef() {
  return this.formBuilder.control(
    {
      firstName: '',
      email: '',
    },
    Validators.required
  );
}

// Triggered on click of a button in the HTML
addForm() {
  this.formList.push(this.formBuilder.control({ firstName: '', email: '' }));
}

在父表单模板中，我遍历 formArray 并使用实现

app-profile-form

 的嵌套子表单 

ControlValueAccessor

呈现它们

<ng-container formArrayName="formList">
  <div *ngFor="let fg of formList.controls; let infoIndex = index">
    <app-profile-form
      [formControlName]="infoIndex"
      [formIndex]="infoIndex"
    ></app-profile-form>
  </div>
</ng-container>

app-profile-form

模板：

<div [formGroup]="form">
  <label for="first-name">First Name</label>
  <input formControlName="firstName" id="first-name" />
  <div *ngIf="firstNameControl.touched && firstNameControl.hasError('required')" class="error">
    First Name is required
  </div>

  <label for="email">Email</label>
  <input formControlName="email" type="email" id="email" />
  <div *ngIf="emailControl.touched && emailControl.hasError('required')" class="error">
    Email is required
  </div>

  <!-- delete the sub-form on click of this button and update the formList array in the parent form --> 
  <button name="deleteForm" (click)="delete()">Delete Form</button>
</div>

我需要能够删除子表单本身并在单击

deleteForm

按钮时更新父表单中的 formList 数组。我怎样才能做到这一点？

这是我的stackblitz 示例。我需要在

delete()

中实现

profile-form.component.ts

功能

Answer 1

您可以将表单索引传递给子组件，然后使用事件并将索引发送回父组件，然后在父组件上删除它：

配置文件形式组件：

<button name="deleteForm" (click)="delete.emit()">Delete Form</button>

@Output() delete: EventEmitter<void> = new EventEmitter<void>();

（删除删除方法）

应用程序组件：

<app-profile-form
    [formControlName]="infoIndex"
    [formIndex]="infoIndex"
    (delete)="delete(infoIndex)"
  ></app-profile-form>

  delete(index: number) {
    this.formList.removeAt(index);
  }