Codementor Events

A Brief About Angular Reactive Forms API

Published Jul 12, 2020
A Brief About Angular Reactive Forms API

Being an essential asset to handle user input, Forms occupy a lot in an enterprise application. When we talk about angular forms the most commonly used are reactive forms and template-driven While choosing between there are some important points to be taken care of Reactive Forms are used when used when complex logic required
Custom and Async validations involved and FormArray and Nested FormGroups are required

Reactive forms are made when FormControl are group using FormBuilder and validated after importing Validators. Lets understand the definition of these keywords which we oftenly used while creating forms

FormControl

Use FormControl to register a single form control, import the FormControl class and create a new instance of FormControl to save as a class property.

FormControl which is extended by the AbstractOption class keeps track of the
validation status and value of a form control.

const control = new FormControl('Hello');

console.log(control.value); 
console.log(control.status);

control.reset({ value: 'Hey', disabled: true });

console.log(control.value); 
console.log(control.status); 

FormGroup

FormGroup is responsible for Keeping a track of the value and validity state of the FormGroup which is group of the FormControls

The status of the FormGroup is counted by reducing the status values of its children. For example, if one of the controls in a group is invalid, the entire group becomes invalid. When all the FormControl value becomes valid, The status becomes valid.

const userFormGroup = new FormGroup({
  first: new FormControl('firstName'),
  last: new FormControl('lastName')
});

userFormGroup.reset({
  first: {value: 'name', disabled: true},
  last: 'last'
});

console.log(this.userFormGroup.value);  

FormArray

FormArrays are composed of FormGroups used when the user input is stored in the form of array. For example, hobbies, skills FormArray is responsible for Keeping a track the value and validity state of an array of FormControl, FormGroup or FormArray instances

const hobbyFormArray = new FormArray([
  new FormControl('HobbyName')
]);

console.log(hobbyFormArray.value);   
console.log(hobbyFormArray.status);  

FormBuilder

Formbilder contains group, array and control, It is responsible for Grouping form controls, Creating nested form groups, Updating parts of the data model, Using the FormBuilder service to generate controls and Validating forms

    this.userFormGroup = this.formBuilder.group({
          'username':new FormControl(null),
          'email':new FormControl(null),
    })

Validators

Angular forms contains inbuilt validators used for performing various validations which are used to maintain data integrity. A validator function is used for that processes a FormControl or collection of controls. The validation should pass for the form to become valid

    this.registerForm = this.formBuilder.group({
        firstName: ['', Validators.required],
        lastName: ['', Validators.required],
        email: ['', [Validators.required, Validators.email]],
        password: ['', [Validators.required, Validators.minLength(6)]]
    });

This what the introduction to the classes which are the building blocks of angular forms which play very essential part of complex data handling forms, Refer the definition of the classes of angular API of forms. For more information about angular reactive forms using model driven approach visit the article of Simplified Angular Forms

Discover and read more posts from Ushmi Dave
get started
post commentsBe the first to share your opinion
Show more replies