根据选中的选择框动态添加删除和获取选择框和文本框的数据

好吧，您可以使用FormArray来动态地将FormGroups添加到您的反应式表单中。

我还看到您FormControl在选择每个组中的 API 选择列表时动态添加s。您可以使用 上的addControl方法FormGroup来实现这一点。

以下是在组件类中实现它的方法：

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, FormArray } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  filterTypes = [
    'TypeOne',
    'TypeTwo'
  ];

  apiTypes = [
    'Less Than',
    'Equals',
    'Greater Than'
  ];

  dynamicForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.dynamicForm = this.fb.group({
      filters: this.fb.array([])
    });
    // this.addFilterToFiltersFormArray();
  }

  createFilterGroup() {
    return this.fb.group({
      filterType: [],
      apiType: []
    });
  }

  addFilterToFiltersFormArray() {
    this.filtersFormArray.push(this.createFilterGroup());
  }

  removeFilterFromFiltersFormArray(index) {
    this.filtersFormArray.removeAt(index);
  }

  selectedAPIChanged(value, i) {
    this.getFilterGroupAtIndex(i).addControl('value', this.getFormControl());
  }

  getFormControl() {
    return this.fb.control(null);
  }

  save() {
    console.log(this.dynamicForm.value);
  }

  get filtersFormArray() {
    return (<FormArray>this.dynamicForm.get('filters'));
  }

  getFilterGroupAtIndex(index) {
    return (<FormGroup>this.filtersFormArray.at(index));
  }

}

在您的组件模板中：

<form [formGroup]="dynamicForm">
  <div formArrayName="filters">
    <div 
      *ngFor="let filter of filtersFormArray.controls; let i = index;">

      <div 
        [formGroupName]="i" 
        class="container">

        <mat-form-field>
          <mat-select 
            placeholder="Select Filter"
            formControlName="filterType">
            <mat-option 
              *ngFor="let filterType of filterTypes" 
              [value]="filterType">
              {{ filterType }}
            </mat-option>
          </mat-select>
        </mat-form-field>

        <mat-form-field>
          <mat-select 
            (selectionChange)="selectedAPIChanged($event.value, i)"
            placeholder="Select API"
            #apiField
            formControlName="apiType">
            <mat-option 
              *ngFor="let apiType of apiTypes"
              [value]="apiType">
              {{ apiType }}
            </mat-option>
          </mat-select>
        </mat-form-field>

        <mat-form-field 
          *ngIf="filter.get('value')">
          <input 
            matInput 
            formControlName="value" 
            [placeholder]="apiField.value">
        </mat-form-field>

        <mat-icon 
          (click)="removeFilterFromFiltersFormArray(i)">
          delete
        </mat-icon>

      </div>
    </div>

    <button 
      mat-raised-button 
      color="primary" 
      type="button" 
      (click)="addFilterToFiltersFormArray()">
      Add Filter
    </button>

    <button 
      class="save" 
      mat-stroked-button 
      color="primary" 
      [disabled]="dynamicForm.invalid || filtersFormArray.controls.length < 1"
      (click)="save()">
      Save
    </button>

  </div>
</form>

这是供您参考的工作示例 StackBlitz。

更新：这是在 Medium上关于这个答案的完整报道。