需要在 Angular 6 中创建动态表单

Question

https://stackblitz.com/edit/angular-h2syhv?file=src%2Fapp%2Fapp.component.ts

我的要求是用 formFields 数组创建一个表单，它是表单域的列表我已经为表单域创建了对象并推送到 formgroup 但我想我错过了 [=19= 中结构的某个地方] 不正确推送表单域不正确我已经更新了 Stackblit

中的代码

Answer 1

我发现您的实施存在很多问题。所以我决定自己创建一个。

您正在寻找的是用 FormGroup 创建一个 FormArray，其中每个 FormGroup 都有动态创建的 FormControl。

为此，您可以这样编写组件 Class：

import { Component, OnInit, Input, SimpleChanges, OnChanges } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, FormArray } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  formFields = [ ... ];

  public tablesForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.tablesForm = this.fb.group({
      employees: this.fb.array([this.addEmployerDetails()])
    });
  }

  addEmployerDetails() {
    const employeeDetailsFormGroup = this.fb.group({});
    this.formFields.forEach(field => {
      employeeDetailsFormGroup.addControl(field.formControl, this.fb.control([]));
    });
    return employeeDetailsFormGroup;
  }

  addEmployerToFormArray() {
    this.employeeRows.push(this.addEmployerDetails());
  }

  get employeeRows() {
    return (<FormArray>this.tablesForm.get('employees'));
  }

}

我们正在 ngOnInit 中创建 FormGroup，我们也在其中调用 addEmployerDetails，这将 return 一个基于 [=20] 的 FormGroup =].

addEmployerToFormArray 会向您的 tablesForm FormGroup 添加一个新的 FormGroup，并且会在单击 Add Employer [=48] 时从模板调用=].

employeeRows geter 也将同时用于模板和组件 Class 本身。

并在您的模板中：

<div class="form-group">
    <div class="row pad-leftright">
        <div class="col-md-12">
            <div (click)="addEmployerToFormArray()">
                <span><i class="fa fa-plus plus-icon"></i></span>
        <span class="emp-title">Add Employer</span>
      </div>
    </div>
  </div>
  <form [formGroup]="tablesForm">
    <div class="row pad-leftright">
      <div>
        <table class="table ft-table simple-table table-equal-columns" border="1">
          <thead class="theader">
            <tr>
              <th *ngFor="let x of formFields">{{x.name}}</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let row of employeeRows.controls; let ind = index;">
              <td formArrayName="employees" *ngFor="let field of formFields">
                <div [formGroupName]="ind">
                  <div>
                    <div class="form-group">
                      <input [type]="field.type" class="form-control" id="example-input-3" [placeholder]="field.name" [formControlName]="field.formControl" />
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </form>
</div>

这里有一个 Working Sample StackBlitz 供您参考。

需要在 Angular 6 中创建动态表单

Need create dynamic form in Angular 6

angular

angular-reactive-forms