We all know that Angular Application is a reactive system. We have two categories of form structures in Angular:

  1. Reactive Forms
  2. Template Driven Forms.

In template driven forms, the template directives are used. Whereas in reactive forms, we could build our own representation of the form in the components. Thus, we could always opt for Reactive Forms.

Let’s begin by knowing the terminologies of reactive forms.

  • formControl
  • formGroup
  • formArray
  • controlValueAccessor

In this blog, we are going to look through formControls and formGroup.

Before beginning, do not forget to import the module (ReactiveFormsModule) and import the classes (FormControl, FormGroup, FormBuilder, Validators)

Imagine you have a form with the following fields:

  1. Name
  2. Age
  3. School
  4. Class
  5. Rank

So here, each field will be having different data types (such as alphabets, numbers, etc). Thus, in reactive forms, validating the fields become very easy using the built-in properties. Also, it is very easy for us to group the individual forms and make the necessary changes.

Let’s start with formControl:
Each field is recognized using the formControls for validation. Thus, we will be setting formControl for each field. Also, default values to the fields can also be set up initially.

Illustration:
In .html file, add:

<input type="text" [formControl]="name">

In .ts file, add:

name = new FormControl('any default values');

And then we go for formGroup:
These individual form controls can be grouped together for better handling of validation stuff and named as formGroup.

Illustration:
Let the HTML file remain the same.
In .ts file, add:

formGroupVariable = new FormGroup({
name = new FormControl('Smith Katana'),
age: new FormControl(12),
});

Now using the formGroupVariable, several validations, customizations can be done using the inbuilt methods. Following are some of them:

Illustration:
In .ts file, add :

name = new FormControl('any default values', {validators: Validators.required, updateOn: 'blur'});

Here, in the second parameter, we could use the Validators Object for validations. Refer the following link for Validators API reference:
https://angular.io/api/forms/Validators

Also updateOn key will intimate the validators to validate only after every blur to avoid validations for every keystroke.

We could also add our own customized method validator by adding the method instead of Validator object as follows:

Illustration:

In .ts file, add :

name = new FormControl('any default values',validatorMethod);

function validatorMethod(name: FormControl) {
//custom validations
}

Note* This method will be called for every keystroke

If you want to have a validation like to submit the form if any of the validations have been passed and it is not necessary that all the fields should be passed. But how do we do that?

formGroupVariable.patchValue('name', { onlySelf: true });

….Simple right?

To enable or disable the form use,

formGroupVariable.enable() && formGroupVariable.disable()

And also to disable a particular form control initially we could use the disabled attribute,

Illustration:

name: new FormControl({ disabled: true, value: null })

Reference Links: