多角度动态提交按钮表单

如何解决多角度动态提交按钮表单

我必须提交一次。

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

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

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

obj 里面的name 字段，实际上会动态的赋给formControlName。

问题在于：

我在一页中有多个表单

带有提交按钮的表单 1

带有提交按钮的表单 2

带有提交按钮的表单 3

带有提交按钮的表格 4

这些来自具有 diffn 控件名称和标签但看起来相似所以我使它动态

但问题是 表单生成器

我怎样才能让它变得动态。

解决方法

为了动态构建表单，您应该定义 FormGroup 并根据需要使用 formBuilder 构建表单，例如： 组件.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",],[
              { label: "firstname",{ label: "age",name: "age"},{ label: "address",name: "add" },{ 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>