Angular Js

Explain FormControl in Angular

by Deepak Talwar
July 9, 2022
0 Comments
10 minute read
312 Views
0 Likes

FormControl in Angular

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 three building components.
FormControl, FormGroup and FormArray

FormControl
A FormControl represents a single input field in an Angular form.The FormControl is an object that contains all of this data about a single input element. It monitors each of these controls' value and validation status.

Simply put, the FormControl is a class. Each form field receives its own FormControl class.We can make references to them in our component class and look at their properties and methods.

FormControl can be used to set the value of a form field, determine its condition (valid/invalid, spotless/dirty, touched/untouched, etc.), and add validation rules to it.

One form input field is represented by a FormControl. It is an Angular form's smallest unit.FormControls include the value of the field as well as states like dirty (changed) or with errors.

//Creating FormControls in a Reactive forms (TS file)
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);
  }
}



//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 value</button>
   <button (click)="setResetName()">Reset</button>
 </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>



<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.

Checkbox using FormControl

married = new FormControl(true); 
<input type="checkbox" [checked]="married.value" (change)="changeValue()" /> Are you married?


changeValue() {
      console.log(this.married.value);
      this.married = new FormControl(!this.married.value);
}

Forms,

Deepak Talwar

Technical Architect and Full Stack Developer with 18+ years of Professional Experience in Microsoft Technologies & PHP Platform. Hands on experience with C#, VB, ASP.NET, ASP.NET MVC, ASP.NET Core, ASP.NET Web API, Linq, ADO.NET, Entity Framework, Entity Framework Core, Sql Server, MYSQL, NoSql, Javascript, Angular, jQuery, AWS, Azure, React, Angular, Laravel, Codeingiter, Serenity, VBA, Cloud Computing, Microservices, Design Patterns, Software Architecture, Web Design and Development.