angular 中的多个动态提交按钮表单

Question

我必须提交一个。

但我会动态地向用户显示 4 个表单

    fields: any = [
        [
            { label: "firstname", name: "first" },
            { label: "lastname", name: "last" },
            { label: "Date", name: "fromDate", type: "date" },
            { label: "To Date", name: "toDate", type: "date" },
        ],
        [
            { label: "firstname", name: "first" },
            { label: "lastname", name: "last" },
            { label: "age", name: "age"},
            { label: "address", name: "add" },
        ],
        [
            { label: "firstname", name: "first" },
            { label: "lastname", name: "last" },
            { label: "mobile", name: "mob" },
        ],
    ]

现在使用这些字段，我使 html 具有多个提交按钮的动态。您可能会看到它们有时具有相同的表单控件名称，有时具有不同的表单控件名称。

obj 中的 name 字段，实际上将动态地赋予 formControlName。

问题是：

我一页有多个表格

带提交按钮的表单 1

带提交按钮的表单 2

带有提交按钮的表单 3

带提交按钮的表单 4

这些来自不同的控件名称和标签，但看起来很相似，所以我将其设为动态

但问题是表单生成器

我怎样才能让它动态化。

Answer 1

为了动态构建表单，您应该定义 FormGroup 并根据需要使用 formBuilder 构建表单，例如： Component.ts

import { FormGroup, FormBuilder, Validators, FormControl} from '@angular/forms';

  constructor(private formBuilder: FormBuilder) { }
  ngOnInit() {
      //Call the Create function
      this.createDynamicForm(this.formIndex);
  }
  public myFormGroup : FormGroup;
  formIndex = 0; // The index of fields array, Form you want to build
  fields: any = [
          [
              { label: "firstname", name: "first" },
              { label: "lastname", name: "last" },
              { label: "Date", name: "fromDate", type: "date" },
              { label: "To Date", name: "toDate", type: "date" },
          ],
          [
              { label: "firstname", name: "first" },
              { label: "lastname", name: "last" },
              { label: "age", name: "age"},
              { label: "address", name: "add" },
          ],
          [
              { label: "firstname", name: "first" },
              { label: "lastname", name: "last" },
              { label: "mobile", name: "mob" },
          ],
      ]

  private createDynamicForm(formIndex) { //create form based on fields array
    this.myFormGroup = this.formBuilder.group(this.createFormGroup(formIndex));
  }

  private createFormGroup(formIndex){ // define each field name and validator - defualt value ...etc
    var _group = {}
    for (var i = 0; i < this.fields[formIndex].length; ++i) {
      _group[this.fields[formIndex][i].name] = ['',Validators.required]
    }

    return _group;
  }

  submitDynamicForm(formIndex){  // I'm Just log the input @todo
    for (var i = 0; i < this.fields[formIndex].length; ++i) {
      console.log(this.fields[formIndex][i].name,this.myFormGroup.get([this.fields[formIndex][i].name]).value)
    }
  }

你的模板应该是这样的

<form [formGroup]="myFormGroup" (ngSubmit)="submitDynamicForm(formIndex)">
    <div *ngFor="let inputField of fields[formIndex]">
        <input type="text" id="{{inputField.name}}_id" [formControlName]="inputField.name">
        <label for="{{inputField.name}}_id">{{inputField.label}}</label>
            </div>
        <input type="submit" [disabled]="!myFormGroup.valid" type="submit" value="submit">
 </form>

angular 中的多个动态提交按钮表单

Multiple dynamic submit button form in angular

html

typescript

angular

formgroups

angular-formbuilder