角度的多个动态提交按钮表单

Posted 2023-03-13

【中文标题】角度的多个动态提交按钮表单

【英文标题】：Multiple dynamic submit button form in angular

【发布时间】：2021-04-07 14:09:56

【问题描述】：

我必须提交一次。

但我会动态地向用户显示 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

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

但问题是 表单生成器

我怎样才能使它成为动态的。

【参考方案1】：

为了动态构建表单，您应该定义 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", 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>

【讨论】：

它只显示一个提交。我想显示 4 个提交按钮，但我只会提交一个表单

我在 typescript (component.ts) 中制作了 4 个表单名称不同的表单，但我无法分配 [formGroup]="item" 但如果我给出一个表单名称 [ formGroup]="HISTORY" 它工作正常，这里 item 的值是 HISTORY。 [formGroup] 指令不接受插值

然后就可以创建多个表单了，只要在定义完表单数组后在表单标签上加上ngFor，这样每个表单都有动作和提交按钮。