How To Use Form Control In Angular

Prerequisites

• Basic knowledge of Angular
• Setup of a local development environment. You will need Angular CLI to set up your environment.

Introduction

For JavaScript frameworks, using clustered templates is not recommended because the form logic resides in the component class. By using Angular’s reactive forms, you can create clean forms without implementing too many directives. It’s also a lot easier to validate your forms, so you don’t need to do end-to-end testing. The form controls in Angular give the developer complete control over all inputs and controls – everything must be explicitly chosen – and nothing is implicit.

We will learn what angular forms are and their advantages and disadvantages in this article .

Lets know how to use form control in angular.

How to get values input form from control in angular

Types of Angular Forms

Angular supports two types of forms.

• ReactiveForms
• Template-driven Forms

To use the Angular forms, we first have to import FormsModule (for template-driven forms) and ReactiveFormsModule (for Reactive Forms) from @angular/forms in your route module.

ng new angular-form

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

Angular Form Controls 

Angular Form Controls contain all the information about an input element as well as the value and validation status of each control. It is just a class which is created for each form field. We can refer to them in our component class and inspect its properties and methods.

FormControl can be used to set the value of a Form field. The FormControl tracks the value and validation status of an individual form control. It can be used standalone as well as with a parent form.

 Angular reactive forms are created using the FormControl. Angular reactive forms are created using three APIs: FormControl, FormGroup, and FormArray.

FormControl: This class is used to set and get values for forms control such as *input> and *select> tags.
FormGroup: This class is responsible for tracking the value and validity of a FormControl group.
FormArray: This class tracks the value and validity of arrays of FormControl, FormGroup, and FormArray objects.

Let’s make an Angular project to experiment with Angular Form Control

Open the terminal and run the folllowing commad to create project.

ng new angular-form

Then import the ReactiveFormsModule inside the app.module.ts file.

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

We have now added the items to the imports array in the ReactiveFormsModule. The next step is to write the following code within the app.component.ts file.

// app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   name = new FormControl('', [Validators.required, Validators.maxLength(25)]);
  age = new FormControl(20, Validators.required);  
  city = new FormControl();
  country = new FormControl({value: 'Nepal', disabled: true});
}

Difference between Template Driven and Reactive forms

The attributes that contribute to template driven vs reactive forms are like,

Form Module:
Template driven form employ “FormsModule”, while Reactive forms are based on “ReactiveFormsModule”

Synchronized Nature:
Reactive forms are mostly synchronous in nature whereas, Template driven forms are asynchronous.

Logic Driven Source:
The template-driven approach draws logic from the template, whereas in reactive driven forms the logic resides mainly in the component or typescript code.

Complexity:
In general, Template driven form are used to create simple forms while Reactive forms are used to create complex forms.

Likewise, reactive forms vs template driven forms put up seve.ral other differences too. Despite that, both the forms stand as two different approaches that get suited based on the application requirement.

Template Driven Forms are easy and have great power for form validation, it is the best fit for simple forms. But using Template Driven Form it is difficult to carry out the work in complex forms hence here the Reactive forms are used

Conclusion

We can create Angular forms as Reactive or Template-Driven forms.

Reactive forms are more robust and Template-Driven forms are suitable for simple forms.

They both have the same parts. The control value accessor takes the input value and sets it to the model.

We will dive more deep in Reactive form with its available properties in our next In our next article, we will explore Reactive form with its available properties in greater depth