FormControl Example in Angular

In this lesson we are going learn about FormControl Example in Angular. FormControl sets and tracks the individual HTML form element. it is one of the building blocks of the angular forms. Please read my previous lesson about Angular Template Driven vs. Reactive Forms.

What is FormControl in Angular?

The FormControl is an object that encapsulates all the information related to the single input element. It Tracks the value and validation status of each of these control. The FormControl is just a class. A FormControl is created for each form field. We can refer to them in our component class and inspect its properties and methods.

We can use FormControl to set the value of the Form field. Find the status of form field like (valid/invalid, pristine/dirty, touched/untouched ), etc. You can add validation rules to it.

Example of FormControl

The Angular has two approaches to building the Basics of Angular Forms. One is Template driven forms in Angular and the other one is Reactive Forms in Angular.

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

import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Reactive Forms

In Reactive Forms in Angular approach, It is our responsibility to build the Model using FormGroup, FormControl and FormArray. To use FormControl, first, we need to import the FormControl from the @angular/forms

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

The form element with the template using the formControlName directive as shown below

<form [formGroup]="reactiveForm" (ngSubmit)="onSubmit()" novalidate>
  <p>
    <label for="firstname">First Name </label>
    <input type="text" id="firstname" name="firstname" formControlName="firstname">
  </p>
  <p>
    <label for="lastname">Last Name </label>
    <input type="text" id="lastname" name="lastname" formControlName="lastname">
  </p>
  <p>
    <label for="email">Email </label>
    <input type="text" id="email" name="email" formControlName="email">
  </p>
  <p>
    <button type="submit">Submit</button>
  </p>
</form>

Then in the component file we create the top-level FormGroup. The first argument to FormGroup is the collection of FormControl. They are added using the FormControl method as shown below.

reactiveForm = new FormGroup({
  firstname: new FormControl('',[Validators.required]),
  lastname: new FormControl(),
  email: new FormControl(),
})

Or you can make use of the FormBuilder API as

this.reactiveForm = this.formBuilder.group({
  firstname: ['',[Validators.required]],
  lastname: [''],
  email: [''],
});

Template-driven forms

In Template-driven forms, the FormControl is defined in the Template. The <Form> directive creates the top-level FormGroup. We use the ngModel directive on each Form element, which automatically creates the FormControl instance.

<form #templateForm="ngForm" (ngSubmit)="onSubmit(templateForm)" novalidate>
  <p>
    <label for="firstname">First Name</label>
    <input type="text" name="firstname" ngModel>
  </p>
  <p>
    <label for="lastname">Last Name</label>
    <input type="text" name="lastname" ngModel>
  </p>
  <p>
    <label for="email">Email </label>
    <input type="text" id="email" name="email" ngModel>
  </p>
  <p>
    <button type="submit">Submit</button>
  </p>
</form>

Use the viewChild to get the reference to the FormModel in the Component class. The control property of the NgForm returns the top-level formgroup.

@ViewChild('templateDrivenForm',null) templateForm: NgForm;

Setting the value

setValue()

We use setValue or patchValue method of the FormControl to set a new value for the form control. There is no difference between setValue and patchValue at the FormControl level.

setEmail() {
  this.reactiveForm.get("email").setValue("john.doe@gmail.com");
};

Conclusion

In this lesson we are going learn about FormControl Example in Angular. FormControl sets and tracks the individual HTML form element. it is one of the building blocks of the angular forms.

Leave behind your valuable queries and suggestions in the comment section below. Also, if you think this article helps you, do not forget to share this with your developer community. Happy Coding 🙂