Dynamic Forms

What is a Dynamic Form?

A form generated or modified at the run time based on the application state or user interaction is called a dynamic form. It makes the forms adaptable to changes in data model. For example, if a user selects a country, the form could dynamically adjust to show additional fields like postal code, state, or country code.

In Angular, Forms are a way of collecting input data from users and it helps them to interact with the application. In this tutorial, we will learn how to create a dynamic forms in Angular.

Need for Dynamic Forms

In Angular, dynamic forms are needed for several reasons which are as follows −

• They allow developers to tailor the form fields to the needs of individual users.
• Dynamic forms are also needed when input fields are required for data input without prior knowledge. Scenarios like questionnaires where the questions vary based on previous answers.
• You can hide, show, or validate certain form controls depending on previous answers or user input.
• Last but not least, the use case of dynamic form is that instead of having multiple forms for different cases, we can create a dynamic form to handle various scenarios by adjusting its layout and fields according to the changes in the data model.

Creating Dynamic Form in Angular

The dynamic form in Angular is based on Reactive Forms. To create a dynamic form in Angular, follow the steps given below −

• Step 1: Install Angular CLI and create a new Angular project.
• Step 2: Import the ReactiveFormsModule and define a data model for form controls inside the Component.
• Step 3: Now, write logic for creating dynamic form controls within the same Component.
• Step 4: In the end, render the dynamic form in the Template.

Working Example

In this example, we are going to create a Reactive Form. The form will generate a country code field dynamically when user select the country.

Step 1: Create a new Angular project. We have named it dynamic-form.

ng newdynamic-form

Step 2: Open the app.component.ts file. Import the necessary package, define a data model and code to generate form controls.

import{ CommonModule }from'@angular/common';import{ Component, OnInit }from'@angular/core';import{ FormBuilder, FormGroup, ReactiveFormsModule, Validators }from'@angular/forms';import{ RouterOutlet }from'@angular/router';

@Component({
   selector:'app-root',
   standalone:true,
   imports:[RouterOutlet, ReactiveFormsModule, CommonModule],
   templateUrl:'./app.component.html',
   styleUrl:'./app.component.css'})exportclassAppComponentimplementsOnInit{
   title ='Dynamic Form Example';
   dynamicForm: FormGroup =newFormGroup({});
   fields: any[]=[{ type:'text', name:'firstName', label:'First Name: ', value:'', required:true},{ type:'text', name:'lastName', label:'Last Name: ', value:'', required:true},{ type:'email', name:'email', label:'Email: ', value:'', required:true},{ type:'select', name:'country', label:'Country: ', value:'', required:true, options:['USA','India','Israel']}];constructor(private fb: FormBuilder){}ngOnInit(){this.createForm();this.onCountryChange();}createForm(){const group: Record<string, any>={};this.fields.forEach(field=>{if(field.type ==='select'){
        group[field.name]=[field.value, field.required ? Validators.required :[]];}else{
        group[field.name]=[field.value, field.required ? Validators.required :[]];}});// Adding country-specific fields initially
  group['countryCode']=[''];  
  group['phoneNumber']=[''];this.dynamicForm =this.fb.group(group);}onCountryChange(){this.dynamicForm.get('country')?.valueChanges.subscribe(country=&gt;{// to modify the countryCode and phoneNumber fieldsif(country ==='USA'){this.dynamicForm.get('countryCode')?.setValue('+1');}elseif(country ==='India'){this.dynamicForm.get('countryCode')?.setValue('+91');}elseif(country ==='Israel'){this.dynamicForm.get('countryCode')?.setValue('+972');}else{this.dynamicForm.get('countryCode')?.setValue('');}});}onSubmit(){
  console.log(this.dynamicForm.value);}}</pre>


Step 3: Open the app.component.html file and add the following code:



<div class="container"><form [formGroup]="dynamicForm"(ngSubmit)="onSubmit()"><div *ngFor="let field of fields"class="form-group"><label [for]="field.name">{{ field.label }}</label><ng-container [ngSwitch]="field.type"><input *ngSwitchCase="'text'" type="text"class="form-control"[formControlName]="field.name"[id]="field.name"/><input *ngSwitchCase="'email'" type="email"class="form-control"[formControlName]="field.name"[id]="field.name"/><select *ngSwitchCase="'select'"class="form-control"[formControlName]="field.name"[id]="field.name"><option *ngFor="let option of field.options"[value]="option">{{ option }}</option></select></ng-container><div *ngIf="dynamicForm.get(field.name)?.invalid && (dynamicForm.get(field.name)?.touched || dynamicForm.get(field.name)?.dirty)"><small class="text-danger">This field is required</small></div></div><!-- To show country code and phone number at runtime --><div class="form-group"*ngIf="dynamicForm.get('country')?.value"><label for="countryCode">Country Code:</label><div class="dynamic-container"><input type="text"class="c-code"[formControlName]="'countryCode'" id="countryCode" readonly /><input type="text"class="phone-field"[formControlName]="'phoneNumber'" id="phoneNumber" placeholder="Phone Number"/></div></div><button type="submit"class="btn btn-primary"[disabled]="dynamicForm.invalid">Submit</button></form></div><router-outlet />



Step 4: Add some CSS:



.container {
  margin-top:20px;
  width:80%;
  margin-left:20px;}.form-group {
  margin-bottom:15px;
  padding:10px;}.form-group label {
  font-weight: bold;
  margin-right:10px;}.form-row {
  display: flex;
  justify-content: space-between;
  gap:20px;}.form-group.col-md-6{
  flex:1;}.dynamic-container {
  display: flex;
  justify-content: flex-start;
  gap:10px;}.c-code {
  width:30px;}

button {
  margin-top:10px;
  padding:8px 16px;}



Now, run the code using ng serve command. You will see the following result −




Dynamic Forms