Answers for "dynamic froms using reactive froms"

dynamic froms using reactive froms

<div>
<input type="button" value="select" (click)="test()">
</div>
<div>
  <form [formGroup]="dynamicForm" (submit)="SaveData()">
 
    <div *ngFor="let ticket of t.controls; let i = index" class="list-group list-group-flush">
      <div class="list-group-item">
        <div [formGroup]="ticket" class="form-row">
          <div class="form-group col-6">
            <label>{{ticket.get('paramName').value}}  </label>
            <input type="text" formControlName="paramValue" class="form-control" />
          </div>
        </div>
      </div>
    </div>
    <input type="submit" value="Click Me" />
  </form>
</div>
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  dynamicForm: FormGroup;
  submitted = false;
  ParamsData: any = [];

  constructor(private formBuilder: FormBuilder) {}
  ngOnInit() {
    this.dynamicForm = this.formBuilder.group({
      numberOfTickets: ['', Validators.required],
      tickets: new FormArray([])
    });
  }

  // convenience getters for easy access to form fields
  get f() {
    return this.dynamicForm.controls;
  }
  get t() {
    return this.f.tickets as FormArray;
  }

  test() {
    this.ParamsData = [
      {
        paramName: 'oracle_home',
        paramType: 'string',
        paramValue: '',
        mandatory: true
      },
      {
        paramName: 'ogg_home',
        paramType: 'string',
        paramValue: '',
        mandatory: true
      },
      {
        paramName: 'java_home',
        paramType: 'string',
        paramValue: '',
        mandatory: true
      },
      {
        paramName: 'interval',
        paramType: 'string',
        paramValue: '',
        mandatory: true
      }
    ];
    this.createform();
  }
  createform() {
    for (let i = 0; i < this.ParamsData.length; i++) {
      this.t.push(this.BuildFormDynamic(this.ParamsData[i]));
    }
  }

  BuildFormDynamic(product): FormGroup {
    return this.formBuilder.group({
      paramName: [product.paramName],
      paramValue: [product.paramValue],
      paramType: [product.paramType],
      mandatory: [product.mandatory]
    });
  }

  SaveData() {
    console.log(this.dynamicForm.value);
  }
}