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);
}
}