Angular 如何删除被动形式的字段集

我有一个反应式表单，有两个字段FName和LName。我已将一些数据绑定到表单中。在HTML中：

<form [formGroup]="form" class="col-lg-12 row">
  <ng-container *ngFor="let name of names; index as i">
    <div class="col-lg-12 row">
      <div class="form-field-cont col-lg-4">
        <mat-form-field class="col-lg-12" appearance="outline"  [floatLabel]="'always'" [hideRequiredMarker]="false">
          <mat-label>F_Name</mat-label>
          <input matInput type="text" value="{{name.fname}}" formControlName="fname">
        </mat-form-field>
      </div>
      <div class="form-field-cont col-lg-4">
        <mat-form-field class="col-lg-12" appearance="outline"  [floatLabel]="'always'" [hideRequiredMarker]="false">
          <mat-label>L_Name</mat-label>
          <input matInput type="text" value="{{name.lname}}" formControlName="lname">
        </mat-form-field>
      </div>
      <div class="col-lg-4 mt-3">
        <ng-container>
          <i class="material-icons cursor-pointer" matTooltip="Remove" (click)="removeExistingNode(i)" style="color:red;">delete</i> 
        </ng-container>
      </div>
    </div>
  </ng-container>
</form>

我能够渲染表单字段。现在我想删除一些记录时，我点击删除按钮。请帮助实现这一目标。我试图使用

格式数组

，但出现了错误。提前谢谢。

---

我已经创建了stackblitz这里是链接：

我们可以使用表单数组来实现这一点。

---

您的代码中有许多错误。请看一看，例如关于Formarray的链接：

  names: any = [{ fname: "ABC", lname: "PQR" }, { fname: "XYZ", lname: "RST" }];
  Form: FormGroup;
  formBuilderObj: any;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.createFormBuilderObj();
    this.createForm();
  }

  createFormBuilderObj() {
    this.formBuilderObj = {
      fname: [{ value: "", disabled: true }],
      lname: [{ value: "", disabled: true }]
    };
  }

  createForm() {
    this.Form = this.formBuilder.group(this.formBuilderObj);
    console.log("this.form", this.Form.value);
  }

  removeExistingNode(index) {}