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