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.

Did you see my other posts?

--

--

--

Front End architect, opensource contributor and investment enthusiast. New content posted every week.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Interview Preparation — Basic JavaScript-1

Update and insert auto-generated code to existing Typescript, HTML and JSON files with Angular…

敷 (Japanese Kanji) — spread, pave, sit, promulgate

Connect a Relational DB and Backend with Node.js, Sequelize, PostgreSQL

Angular 13: Create multiple dynamic components using directive — ngFor.

How can we convert a DataTable to JSON data in UİPATH?

How to make your React App SEO-friendly?

How to host your Angular 9 webapp with Firebase for free

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Khoi Bui

Khoi Bui

Front End architect, opensource contributor and investment enthusiast. New content posted every week.

More from Medium

Typescript for Noobies

Understanding Dragula.js (Drag-n-Drop library) events

Angular vs React vs Vue : Which to choose for your career as a UI developer

Angular Authentication Using JWT