Angular Forms

In Previous topic we have learnt about Angular Pipes, in this article we will learn about angular form and subsequent topics.

What is Angular Forms ? 

Forms are integral part of any application or you can say that forms are the building blocks of any application. You can use forms to collect data from User.

We can say Angular Form module consist of three building blocks:

a. Form Control ➢
In Angular, Form Control are the classes that can hold both data and validation information of any element in form. FormControl extends the AbstractControl class, which enable it to access the values, validation status, events, etc.

b. Form Group ➢
In Angular, Form Group is a collection of FormControl. FormGroup is used with FormControl to track the value and validate the state of FormControl. FormGroup aggregates the value of each child FormControl into a single object using each control name as key. If one control in a group is invalid, the entire group is rendered invalid.

regForm = new FormGroup({

    name: new FormControl(""),

    email: new FormControl(""),

    password: new FormControl(""),

    registerAs: new FormControl("")

  }); and you can se it as below:

let request = {       userName: this.regForm.get("name"),       email: this.regForm.get("email"),       password: this.regForm.get("password"),       role: this.regForm.get("registerAs")     }

in Angular you can set values to individual form group or set all at once as shown below:
you can use patchValue to set some values.
this.regForm.patchValue({
.......
});

To set all value at once you can use setValue.
this.regForm.setValue({
.......
});

b. Form Array➢
FormArray is an array of FormControl. It is similar to FormGroup.

Types of Angular Forms ➤➤

There are two types of form building supported by Angular.

1. Template-Driven approach.

2. Reactive approach.

Template-Driven Approach ⮞⮞

A Template Driven form is the simplest way to build a form in Angular. It uses two-way data binding directive (ngModel) to create and manage form Instance. A template form is mainly driven by the view component. So it uses directives placed in HTML rather than TypesScript or JavaScript. A template driven form is asynchronous due to use of directives.

<form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>

                    <div class="form-group">

                        <label for="name">Name : </label>

                        <input type="text" name="name" class="form-control" placeholder="Name"

                            [(ngModel)]="regForm.name" required minlength="3" maxlength="20" #name="ngModel"

                            [ngClass]="{ 'is-invalid': f.submitted && name.errors }" />

                        <div class="invalid-feedback" *ngIf="name.errors && f.submitted">

                            <div *ngIf="name.errors['required']">Name is required</div>

                            <div *ngIf="name.errors['minlength']">

                                Name must be at least 3 characters

                            </div>

                            <div *ngIf="name.errors['maxlength']">

                                Name must be at most 20 characters

                            </div>

                        </div>

                    </div>

                    <div class="form-group">

                        <label for="email">Email : </label>

                        <input type="email" name="email" class="form-control" placeholder="Email"

                            [(ngModel)]="regForm.email" required email #email="ngModel"

                            [ngClass]="{ 'is-invalid': f.submitted && email.errors }" />

                        <div class="invalid-feedback" *ngIf="email.errors && f.submitted">

                            <div *ngIf="email.errors['required']">Email is required</div>

                            <div *ngIf="email.errors['email']">

                                Email must be a valid email address

                            </div>

                        </div>

                    </div>

                    <div class="form-group">

                        <label for="password">Password : </label>

                        <input type="password" name="password" class="form-control" placeholder="********"

                            [(ngModel)]="regForm.password" required minlength="6" #password="ngModel"

                            [ngClass]="{ 'is-invalid': f.submitted && password.errors }">

                        <div class="invalid-feedback" *ngIf="password.errors && f.submitted">

                            <div *ngIf="password.errors['required']">Password is required</div>

                            <div *ngIf="password.errors['minlength']">

                                Password must be at least 6 characters

                            </div>

                        </div>

                    </div>

</form>

Above is an example of Template Driven Form.

The #f is reference variable to the for directive, using this we can handle the behavior of form.

we used [(ngModel)] to use two way data-binding with model data.

Here #name = "ngModel" or #email = "ngModel" etc. exports ngModel into local variable called name. ngModel Mirrors many of the properties of its underlying FormControl instance so you can use this template to check for control states such as dirty, valid.

Reactive Approach ⮞⮞

Reactive forms are a source to manage a specific form state at a particular instant of time. They are a source to ensure the union of your data along with all the changes updated in the source location. It also provide dynamic form validation in which the input and values are to be accessed.

Reactive forms are easy to test as developers is sure of the data consistency within the form. In short we can say reactive forms in angular are a way to define the structure of the component class form. 

To use Reactive form you have to import ReactiveFormsModule from @angular/forms in your root module.

Difference between Template Driven and Reactive approach ➤➤

← Angular Pipes