This Article helps you to Understand, FormControl in Angular
Building Blocks of Angular Forms
Whether you use a template-driven or reactive forms strategy, the Angular Forms module has 3 building components. FormControl, FormGroup and FormArray
FormControl in Angular
Simply put, the FormControl in Angular is a class that tracks the properties, the values, the methods and validation status (valid/invalid, spotless/dirty, touched/untouched, etc.), of an individual form control.
You could not define the type of a FormControl before Angular 14. This could cause misunderstandings about the desired type of a form during runtime.
But starting with Angular 14, FormControls are strongly typed by default. In other words, you can indicate the type you anticipate in a specific FormControl when you declare one.
FormControls in a Reactive forms
import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-address',
templateUrl: 'address.component.html',
styleUrls: ['address.component.css']
})
export class AddressComponent {
name = new FormControl('', [Validators.required, Validators.maxLength(15)]);
age = new FormControl(20, Validators.required);
city = new FormControl();
country = new FormControl({value: 'India', disabled: true});
married = new FormControl(true);
setNameValue() {
this.name.setValue('Deepak');
console.log('Name: ' + this.name.value);
console.log('Validation Status: ' + this.name.status);
}
setResetName() {
this.name.reset();
}
changeValue() {
console.log(this.married.value);
this.married = new FormControl(!this.married.value);
}
}
Check Value / Check Validation status of a FormControl
//Retrieve the current value in the input field using the value property
this.name.value
//Check the validation status of the First Name element
this.name.errors // returns the list of errors
this.name.dirty // true if the value has changed (dirty)
this.name.touched // true if input field is touched
this.name.valid // true if the input value has passed all the validation
this.name.status // true if pass validation
Use FormControl in Template
<div>
<div>
Name: <input [formControl]="name" />
<label *ngIf="name.invalid" [ngClass]="'error'">
Name required with max 15 character.
label>
div>
<div>
<button (click)="setNameValue()">Set valuebutton>
<button (click)="setResetName()">Resetbutton>
div>
<div>Age: <input [formControl]="age" />div>
<div>City: <input [formControl]="city" />div>
<div>Country: <input [formControl]="country" />div>
<div>
<input type="checkbox" [checked]="married.value" (change)="changeValue()" />
Are you married?
div>
div>
// Retrieve values of form controls
<div>
<p>
Name: <b>{{ name.value }}b>, Validation Status: <b>{{ name.status }}b>
p>
<p>Age: <b>{{ age.value }}b>, Validation Status: <b>{{ age.status }}b>p>
<p>City: <b>{{ city.value }}b>p>
<p>Country: <b>{{ country.value }}b>p>
<p>Married?: <b>{{ married.value }}b>p>
div>
Other things we can do with FormControl
SetDefault Value
If we want to set a default value to our form control, we can pass a default value while instantiating a FormControl in our class.
city = new FormControl('New Delhi');
<input [formControl]="city">
married = new FormControl(true);
<input type="checkbox" [checked]="married.value" (change)="changeValue()" />
Disable FormControl
To disable a form control, we need to pass disabled property as true while instantiating FormControl in our class.
country = new FormControl({value: 'India', disabled: true});
<input [formControl]="country"> The above form control will be displayed as disabled in UI with a default value.
FormControl Validation
To validate a form control created by FormControl, we need to use Validators that belongs to @angular/forms library.
name = new FormControl('', [Validators.required, Validators.maxLength(15)]);
age = new FormControl(20, Validators.required);
Name: <input [formControl]="name">
<label *ngIf="name.invalid" [ngClass] = "'error'" > Name required with max 15 character. label>
Age: <input [formControl]="age">
<label *ngIf="age.invalid" [ngClass] = "'error'" > Age required. label> The above code is valid when we are
using standalone FormControl and not with the HTML form tag.
Deepak Talwar
