Types of form in angular

There are two main types of form in the Angular framework:

1.Template-driven Form

2.Reactive Form

Template-driven Form

The template-driven form is a form that makes use of the form module and most of the logic is driven by the template. Template-driven form is asynchronous in nature. It follows the approach of two-way binding.

Example of template driven form

<section class="sample-app-content">

<h1>Template-driven Form Example (with bi-directional data binding):</h1>

<form #myForm="ngForm" (ngSubmit)=""text"

[(ngModel)]="user.firstName" required>

</p>

<p>

<label>Password:</label>

<input type="password"

[(ngModel)]="user.password" required>

</p>

<p>

<button type="submit" [disabled]="!myForm.valid">Submit</button>

</p>

</form>

</section>

Advantage of using template-driven form are:-

• Easy to use
• Suitable for simple form with less data and fails for larger form with more data.
• Template driven form are similar to AngularJS
• Template driven form has two way data binding(using [(NgModel)] syntax)
• Minimal component code
• Unit testing is another challenge
• Data model is unstructured
• Low level API access
  

Reactive Form

Reactive form is a form that makes use of reactive form modules and most of the logic is driven by the typescript code. Reactive form is synchronous in nature.

Example of Reactive form:-

<section class="sample-app-content">

<h1>Reactive Form Example:</h1>

<form [formGroup]="form" (ngSubmit)="onSubmit()">

<p>

<label>First Name:</label>

<input type="text" formControlName="firstName">

</p>

<p>

<label>Password:</label>

<input type="password" formControlName="password">

</p>

<p>

<button type="submit" [disabled]="!form.valid">Submit</button>

</p>

</form>

</section>

Advantage of using reactive form are:

• Handles any complex scenarios
• More flexible, but needs a lot of practice
• More component code and less HTML markup
• Reactive transformations can be made possible such as
  • Handling a event based on a debounce time
  • Adding elements dynamically
• Easier unit testing
• Multiple complex validation are there. Custom validations are required

• Json structure can be easily send in form value.
• Easier to perform action on value change.
• Data model is structured
• Abstraction on top of APIs
• In reactive form validation can be easily implemented as compare to template driven form.

Example:-

import { FormGroup, FormControl, Validators } from '@angular/forms';

cardForm = new FormGroup({

name: new FormControl('', [

Validators.required,

Validators.minLength(3),

Validators.maxLength(5),

]),

});

At Oodles ERP, we provide complete enterprise solutions with a focus on building custom applications for web and mobile platforms. Our end-to-end web application development services enable organizations to efficiently manage their routine business tasks and activities. For more information, contact us at [email protected].