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

Question

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

我的要求是使用 formFields 数组创建一个表单，该数组是表单字段列表我为表单字段创建对象并推送到表单组但我想我错过了 UI 中的结构不正确的某个地方，推送表单字段不正确正确我已经更新了 Stackblit 中的代码

标签： angularangular-reactive-forms

Answer 1

我看到您的实施存在很多问题。所以我决定创建自己的。

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

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

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'));
  }

}

我们正在创建我们也在调用FormGroup的地方，它将基于.ngOnInitaddEmployerDetailsFormGroupformFields

addEmployerToFormArray将为您添加一个新FormGroup的tablesForm FormGroup，并在单击Add Employerdiv 时从模板中调用。

employeeRows geter 也可以在模板和组件类本身中使用。

在您的模板中：

<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>

---

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