Reactive Form AbstractControl Properties in Angular

Introduction

In this article, we are going to learn from group and form control class properties with reactive forms using the angular 6 application. Before proceeding further, I would recommend that you will understand how to create an angular application and configure the route URLs with the Reactive form.

The FormControl and FormGroup classes these are the two classes. we use to build a reactive form having a good understanding of these two classes properties and methods.

AbstractControl

Inside the reactive form, we create instances of form control and form group classes, both these classes derive from the AbstractControl base class.

So, if we take a look at the create employee form.

The definition of the FormControl class. this class extends the base class AbstractControl class.

export declare class FormControl extends AbstractControl
{
}

The FormGroup class also extends to the base class AbstractControl. The definition of FormControl class

export declare class FormGroup extends AbstractControl
{
   controls: {
      [key: string]: AbstractControl;
   }
}

We take a look at the definition of this AbstractControl class. the name implies this class is an abstract class. meaning, we cannot create an instance of this class has got several properties.

FormControl and FormGroup Properties.

1] Value
2] Errors
3] Valid
4] Invalid
5] Dirty
6] Pristine
7] Touched
8] Untouched

Within the definition of this abstract control base class. we can see all those properties.

Form Control

The instance of FormControl class tracks. the value and state of an individual HTML input element this form control.

Form Group

The form group class directive tracks the value and state of all form controls in its group.

here, we create a form Group instance and within this group get the two form controls full name and email.

//create-employee.component.ts

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

@Component({
  selector: 'app-create-employee',
  templateUrl: './create-employee.component.html',
  styleUrls: ['./create-employee.component.css']
})
export class CreateEmployeeComponent implements OnInit {
 
  employeeForm: FormGroup;

  constructor() { }

  ngOnInit() {
    this.employeeForm = new FormGroup({
      fullName: new FormControl(),
      email: new FormControl()
    });
  }
}

So, this formGroup instance is going to track. the value and state of both forms control full name and email. to associate this formGroup the instance with an HTML form element.

Using formGroup Directive

We use form group directive and both these directives. formGroup and form control name provide by reactive forms module.

//create-employee-component.html

<form class="form-horizontal" [formGroup]="employeeForm">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">Create Employee</h3>
    </div>
    <div class="panel-body">
      <div class="form-group">
        <label class="col-sm-2 control-label" >Full Name</label>
        <div class="col-sm-8">
          <input id="fullName" type="text" class="form-control" formControlName="fullName">
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-2 control-label" >Email</label>
        <div class="col-sm-8">
          <input id="email" type="text" class="form-control" formControlName="email">
        </div>
      </div>
    </div>
    <div class="panel-footer">
      <button class="btn btn-primary" type="submit">Save</button>
    </div>
  </div>
</form>

Let’s log this employee form property which is an instance of form group to the browser console.

onSubmit(): void {
  console.log(this.employeeForm);
} 

Let’s save the changes. now, let’s fill in this form. launch browser developer tools and then click, the Save button.

The forms group instance is a log to the console. this is the form model so this form Group instance tracks the value instead of this entire form.

Properties

here, we see the value property. all the form control names and their values tracked by the value property of the form group.

Abstract control class properties in angular We have all those properties at the form group level. here we also have this control collection property. and it contains instances of all form controls in that form group.

employeeForm.controls.fullname.value

employeeForm.get('fullName').value

Now, let’s see how to access the value and state of an individual form control instance. that is present inside a form group.

If we retrieve the value of that form control or to find out the state. we can use the respective properties like touch, dirty, pristine etc.

Another way is to use the get method. so, the form group we use the get method and then specify the string name of the form control.

Both these approaches in action. let’s make these two lines and then change the bits. the form group we know we have caught controls collection property.

<table border="1">
  <tr>
    <th style="padding: 10px">FormGroup</th>
    <th style="padding: 10px">FormControl (fullName)</th>
  </tr>
  <tr>
    <td style="padding: 10px">
      touched : {{ employeeForm.touched }}
      <br/> dirty : {{ employeeForm.dirty }}
      <br/> valid : {{ employeeForm.valid }}
      <br/> Form Values : {{employeeForm.value | json}}
    </td>
    <td style="padding: 10px">
      touched : {{ employeeForm.get('fullName').touched }}
      <br/> dirty : {{ employeeForm.get('fullName').dirty }}
      <br/> valid : {{ employeeForm.get('fullName').valid }}
      <br/> FullName Value : {{employeeForm.get('fullName').value}}
    </td>
  </tr>
</table

We have the respective properties with the form group state value. so we are using the employee form group property.

The respective HTML elements properties change as expected. so, both these classes from the control and form group derive from the base class AbstractControl.

AbstractControl class methods

The AbstractControl class have useful properties and this class also provides these useful methods.

setValidators()
clearValidators()
updateValueAndValidity()
setValue()
patchValue()
Reset()

Thank you for reading this article and I hope you get started your application using Angular 6.