Question

我要根据更改选项动态添加选择框和输入框，并且需要保存日期！[在此处输入图片描述] [

Answer 1

首先，由于您是Angular的新手，您应该阅读Material Input和Reactive Forms的文档，以实现要按照该屏幕快照中指定的方式进行构建的确切内容

材料输入样本（无反应形式）

<form class="sample-form">
  <table class="example-full-width" cellspacing="0"><tr>
    <td><mat-form-fieldstyle="width:80%">
      <input matInput placeholder="Select Filter">
    </mat-form-field></td>
    <td><mat-form-field style="width:80%">
      <input matInput placeholder="Select Type">
    </mat-form-field></td>
    <td><mat-form-field style="width:80%">
      <input matInput placeholder="">
    </mat-form-field></td>
  </tr></table>
</form>

接下来，如果您在Google上进行了快速搜索，您会发现一些快速教程，它们可以使用“反应式”表单来构建动态表单字段（例如，单击以创建FormGroups或一组输入字段）。这是一个不错的article。从那里开始，您可以慢慢地构建动态表单字段。

Answer 2

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

我还看到当选择每个组中的“ API选择列表”时，您正在动态添加FormControl。您可以在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>

这是您推荐的Working Sample StackBlitz。

更新：这是有关中级答案的Full Write Up。

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

2 个答案: