Types of Angular Forms and How to Develop Dynamic Forms?

Types of forms in Angular

1. Dynamic forms: Reactive forms that allow for the dynamic development of form fields are known as Angular dynamic forms. Angular dynamic form builder is an angular plugin that create form dynamically using JSON. When the number of form fields is unknown in advance or when the form fields depend on other user inputs, this is helpful. In this blog, we will learn about dynamic forms in Angular.
   
   
2. Model-driven forms: Reactive forms, sometimes referred to as Model-driven forms, are trickier to use than template-driven forms. They are more adaptable and scalable than template-driven forms since they are defined programmatically using TypeScript classes. Dynamic form fields, form validation, and personalized form controls are characteristics that reactive forms offer.
   
   
3. Template-driven forms: The simplest and most popular kind of forms in Angular are template-driven forms. They are referred to as template-driven because directives like ngForm, ngModel, and ngSubmit are used to define the form structure within the template itself. These forms are simple to put up, but they are best used for straightforward use cases or small-scale projects because of their limited versatility.

What is the dynamic forms?

• An approach to constructing forms that can be generated dynamically based on user input or other conditions is the dynamic form in Angular. Building a form component that can render various fields and sections depending on the data it receives is required. This method is helpful when the form’s structure has to change in response to user activity, such as when new form fields need to be added or removed or when users need to choose which portions to display. Complex forms can be more easily created and require less code to maintain, thanks to the dynamic form technique.

What justifies the use of the dynamic forms?

Angular’s dynamic form is utilized for generating forms that can be created dynamically based on user input or other conditions. There are different types of forms in Angular and here you can see some of the main reasons why you should think about building dynamic forms in Angular. There are various reasons for using dynamic forms in Angular:

• dynamic forms are flexible and simple to alter to meet application requirements. Based on user settings and other factors, they can show various fields.

• When an application expands, adding or removing form fields is simple and doesn’t require modifying the structure of the form component.

• Because dynamic forms eliminate redundant code, developers can reuse them to construct many forms with various fields and sections.

• dynamic forms provide a better user experience by adapting to the user’s input and showing or hiding fields and sections accordingly.

Generally, employing dynamic forms increases form creation flexibility and scalability, making it simpler to develop complex forms and manage them over time.

How can we create dynamic forms?

If you are wondering how to create dynamic form in Angular then don’t worry here you can see how developers can create dynamic forms angular.

Step 1:-

Create one folder in your shared folder module like the folder name is form_controller. In this form_controller folder, we need to create three files (form_genrator, form_fileds, form_parameters ).

• form_genrator :- In this file we need to write the code to generate a dynamic form.

import { Validators } from '@angular/forms';
import { template_ref } from './fields'


export const generateForm = (fields: any) => {
   let group: any = {};
   fields.forEach((field: string) => {
       let f = template_ref[field]
       let validations = [];
       if(f.required){
           validations.push(Validators.required)
       }
       if(f.emailRequired){
           validations.push(Validators.email)
       }


       if(f.pattern){
           validations.push(Validators.pattern(f.pattern))
       }
      
       group[field] = [f.defaultValue || '', validations]; 
   });
   return group
}

• form_fileds :- In this file, we need to declare the form name/formGroupName and form fields/formControlName name.

export const segment = {
   userForm: {
       fields: [
           'name',
           'lName',
           'mobile'
       ]
   }
}

• form_parameters :- In this file we need to declare the required fields.

export const template_ref: any = {
   name: {
       label: 'Name',
       controlType: 'text',
       placeholder: 'Enter your name',
       autofillOff: true,
       required: true
   },
   lName: {
       label: 'Last Name',
       controlType: 'text',
       placeholder: 'Enter your last name',
       autofillOff: true,
       required: true,
       pattern: /^(\+91[\-\s]?)?[0]?(91)?[789]\d{9}$/g
   },
   mobile: {
       label: 'Mobile No',
       controlType: 'number',
       placeholder: 'Enter Your mobile no',
       autofillOff: true,
       required: true
   }
}

Step 2:-

• Create a component in the shared folder module. For creating dynamic input tags with different different types.

input.component.html

<div [formGroup]="form" [ngSwitch]="fieldObj.controlType">
 <ng-container *ngSwitchCase="fieldObj.controlType === 'radio'">
   <div class="form-check" *ngFor="let g of fieldObj.options">
     <input class="form-check-input" type="radio" name="gender" [value]="g" [formControlName]="key" />
     <label class="form-check-label" [for]="key">
       {{ g }}
     </label>
   </div>
 </ng-container>
 <div class="dropdown" *ngSwitchCase="fieldObj.controlType === 'dropdown'">
   <label [for]="key">{{ fieldObj.label }}</label>
   <button class="btn btn-light dropdown-toggle" type="button" (click)="openDropdown = !openDropdown">
     {{form.get(key)?.value || 'Select City'}}
   </button>
   <div class="dropdown-menu" [ngClass]="{show: openDropdown}" aria-labelledby="dropdownMenuButton">
     <ng-container *ngFor="let el of fieldObj.options">
       <a class="dropdown-item" (click)="onSelectDropdown(el.name)">{{ el.name }}</a>
     </ng-container>
   </div>
 </div>
 <div class="form-group" *ngSwitchCase="fieldObj.controlType === 'textarea'">
   <label [for]="key">{{ fieldObj.label }}</label>
   <textarea [name]="key" [id]="key" cols="30" rows="3" class="form-control" [formControlName]="key"></textarea>
   <div class="help-box" *ngIf="isInValid">
     <p *ngIf="control && control.errors && control.errors['required']">Please enter Address.</p>
   </div>
 </div>
 <div class="form-group" *ngSwitchCase="fieldObj.controlType === 'fileUploader'">
   <label for="exampleFormControlFile1">Example file input: </label>
   <input type="file" class="form-control-file" id="exampleFormControlFile1" (change)="handleFileInput($event)">
 </div>
 <div class="form-group" *ngSwitchCase="fieldObj.controlType === 'dateTimePicker'">
   <label class="mr-3" [for]="key">{{ fieldObj.label }}</label>
   <ngx-datepicker [formControlName]="key" [options]="options"></ngx-datepicker>
 </div>
 <div class="form-group" *ngSwitchDefault>
   <label [for]="key">{{ fieldObj.label }}</label>
   <input [type]="fieldObj.controlType" class="form-control" [id]="key" [formControlName]="key"
     [placeholder]="fieldObj.placeholder || ''" [autocomplete]="fieldObj.autofillOff ? 'off' : 'on'" />
   <div class="help-box" *ngIf="isInValid">
     <p *ngIf="control && control.errors && control.errors['required']">{{ fieldObj.label }} is required!</p>
     <p *ngIf="control && control.errors && control.errors['email']">Please enter valid email ID!</p>
     <p *ngIf="control && control.errors && control.errors['pattern']">Please enter valid mobile number.</p>
   </div>
 </div>
</div>

input.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { template_ref } from '../form_controller/form_parameters';


@Component({
 selector: 'app-input',
 templateUrl: './input.component.html',
 styleUrls: ['./input.component.scss']
})
export class InputComponent implements OnInit {


 @Input() form: FormGroup = new FormGroup({});
 @Input() key!: string;
 constructor() { }


 ngOnInit(): void {
 }


 get fieldObj() {
   return template_ref[this.key];
 }


 get fControl(){
   return this.form.controls;
 }
}

Step 3:-

• Create a component to show your form. Now, You just need to use <app-input> to create an input tag. Like, I have a created component with the name dynamic-form.

dynamic-form.component.html

<div class="row d-flex justify-content-center mt-5">
   <div class="col-sm-6">
       <ng-container *ngFor="let field of fieldArray">
           <app-input [form]="formGroup" [key]="field"></app-input>
       </ng-container>
       <div class="btn btn-primary mt-2" (click)="getFormValue()">Save</div>
   </div>
</div>

dynamic-form.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { segment } from 'src/app/shared/form_controller/form_fileds';
import { generateForm } from 'src/app/shared/form_controller/form_genrator';


@Component({
 selector: 'app-dynamic-from',
 templateUrl: './dynamic-from.component.html',
 styleUrls: ['./dynamic-from.component.scss']
})
export class DynamicFromComponent implements OnInit {


 public formGroup: FormGroup = new FormGroup({});
 public form = segment['userForm'].fields;
 public fieldArray:any = [];
 constructor(private fb:FormBuilder) { }


 ngOnInit(): void {
 }
 ngAfterContentInit() {
   var fieldArray = generateForm(this.form);
   for (const field of Object.keys(fieldArray)) {
     this.fieldArray.push(field);
   }
   this.formGroup = this.fb.group(fieldArray);
 }


 public getFormValue(){
   console.log('this.formGroup.value :>> ', this.formGroup.value);
 }


}

Our Output:- 

Conclusion:

Dynamic form is the best approach to work with complex and huge-size forms, it can be expandable easily in the future if required. With the help of Angular form dynamic, developers can create grouped input controls. Hope that you learned how to build dynamic angular forms. Developers prefer to use Angular to create dynamic forms because Angular performance is good. Also, dynamic forms have many advantages, including the capability to add customization and validation choices, which makes them a preferred choice for dealing with complicated forms. Hire AngularJs developers if you are trying to get a fully featured solution that includes dynamic forms.

FAQ: