Tech: Building Dynamic Form in Angular 9 and Ivy — Part 2
If you are tired of handling forms in your Angular apps, you’re in the right place. This article doesn’t help you avoid working with form entirely but provides an awesome way to reduce code boilerplate so you don’t have to build your form over and over again.
This article is the second part of 2 part series. If you have not read the first part I’d recommend you to pause right here and take a look at how we construct dynamic form before diving into new stuff.
Consuming Dynamic Form
For the second part, we focus on consuming the dynamic form. To use it, first we need to construct a JSON model for every field in our form.
// form-config.tsexport const FormConfig: DynamicFieldModel[] = [
{
label: "Text",
name: "text",
type: "text"
},
{
label: "Select",
name: "select",
type: "select",
options: [
{ label: "Option 1", value: "1" },
{ label: "Option 2", value: "2" },
{ label: "Option 3", value: "3" }
]
},
{
label: "Datepicker",
name: "datepicker",
type: "datepicker"
}
];
According to the above configuration, we are building a form with 3 different inputs: a text, a select dropdown and a date picker. Each field has several attributes like label, type, name (formControlName used in reactive form) and options (choices for select dropdown).
Next we are creating a component called dynamic-form. This component contains logic to build a formGroup based on the configuration we just declared above. In the template we define a form tag then attach formGroup reference to it. Inside form tag, an Angular structural directive *ngFor is being used to iterate through the form model and display all the fields by calling DynamicFieldComponent we built in part 1.
// dynamic-form.component.ts@Component({
selector: "app-dynamic-form",
template: `
<form [formGroup]="formGroup">
<div *ngFor="let field of formConfig">
<app-dynamic-field
[formGroup]="formGroup"
[name]="field.name"
[type]="field.type"
[label]="field.label"
[options]="field.options || []">
</app-dynamic-field>
</div>
</form>
`
})export class DynamicFormComponent implements OnInit { formGroup: FormGroup; formConfig = FormConfig; constructor(private fb: FormBuilder) {} ngOnInit() {
this.buildForm(this.formConfig);
} buildForm(formConfig: DynamicFieldModel[]) {
let form = {};
formConfig.forEach(field =>
(form = { ...form, [field.name]: new FormControl("") })
);
this.formGroup = this.fb.group(form); }}
That’s all you have to do to consume dynamic form. Feel free to adjust the template and rearrange the fields as much as you’d like.
Wrap Up
I hope you enjoy the 2 part series of building dynamic form. This technique works extremely well where you have to handle a lot of forms in the apps. If you have any question or concern, feel free to let me know in the response section. Check out this Stackblitz to see full implementation.
