Multiple dynamic submit button form in angular

Question

I have to make a single submit.

But i will show the user 4 forms dynamically

    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" },
        ],
    ]

now using these fields i made my html dynamic with multiple submit button. you may see they have sometimes same form control name, sometimes diff form control name.

name field inside obj, will actually been given to formControlName dynamically.

the problem is:

I have multiple forms in one page

Form 1 with submit button

Form 2 with submit button

Form 3 with submit button

Form 4 with submit button

These from have diffn control name & label but look similar so I made it dynamic

But problem is Formbuilder

How can I make that Dynamic.

Answer 1

In order to build your form dynamically you should define FormGroup and build your form using formBuilder based on what you want, for example: 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)
    }
  }

and your template should be like this

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