Angular Reactive Forms - Part Eight

In the last article, we’ve learned about Template driven forms. And here, we’ll look into a different approach to create forms and that is Reactive forms. And this approach gives us more control over the structure and the behavior of our form. If you want to build dynamic forms where input fields are rendered based on some data structure that you get from the server, then the only option is to create this controller objects in the code. And by the way, Reactive forms are easier to unit test. So by the end of this article, we’ll be able to:

• Create Control objects programmatically
• Add validation to the form
• Implement custom validation
• Implement asynchronous validation (that involves contacting the server)
• Build forms that include an array of objects that are added or removed dynamically.

But if you’re a beginner in Angular and you want to start your journey with Angular then here is the roadmap for you.

• Introduction And Setting Up The Environment - Part One
• Typescript in a Nutshell - Part Two
• Building Blocks of Angular - Part Three
• Binding Variations And Displaying Data - Part Four
• Building Reusable Components – Part Five
• Directives – Part Six
• Template Driven Form – Part Seven

And it is the 8^th article of Angular series. So let’s start our journey with Angular.

Building a Bootstrap Form

To speed things up, I’ve built the form for you. Just extract the RAR file and copy paste the component into your project component folder. And then register this component in app.module.ts and call the component with its selector in app.component.html.

So this is our signup-form.

Creating Controls Programmatically

It is the simple bootstrap form and now we want to convert it to the Angular Reactive form. You already know that in the template driven form, we use ngModel directive on input elements and this directive internally creates an instance of FormControl. But now when we’re building the reactive form, we should create this FormControl object explicitly in the code. So let’s go to our signup-form.component.ts and here we’ll import a couple of classes.

import { FormGroup, FormControl } from "@angular/forms";

Next, we need to create an instance of FormGroup, So,

Now if you see this image, we have 3 overloaded constructors of FormGroup. Second and third are optional but the 1^st is necessary. It is the object property containing one or more key value pairs, each key is a string and the value is an AbstractControl

Now what is AbstractControl?

Well in OOP, we’ve this concept called inheritance. So if we have multiple classes that have some common behavior and properties, instead of implementing this common behavior in multiple places we define them once in a parent or base class and then those other classes inherit this common behavior from their base class. So in Angular, AbstractControl is the base class and FormControl and FormGroup are child classes. All the properties which you see common in FormControl and FormGroup classes are actually defined in AbstractControl class

So back in component and as the intellisense suggests.

export class SignupFormComponent {
  form = new FormGroup({
    username: new FormControl()
  });
}

And if you’re dealing with a complex form that includes sub groups then you’ll create the instance of FormGroup here instead of FormControl with username. And then this FormGroup contains 1 or more FormControl objects. Let’s come back to the point,

export class SignupFormComponent {
  form = new FormGroup({
    username: new FormControl(),
    password: new FormControl()
  });
}

So this is how we explicitly create FormGroup and FormControl objects in the code. Now you might think that it is the javascript object initializer syntax and here we use the key in string. Yes we can go with string syntax as well, it is valid but if it is a single keyword like here we have username. It is ok if we implement it without single quotes.

Now we need to go to our template and associate our input fields with this FormControl objects. So here back in form template, first we need to apply a directive of our form element.

<form [formGroup]="form">
</form>

Here ‘form’ is the component property which we created just above and [formGroup] is because of new FormGroup() as we’re creating the FormGroup instance in form field. Now inside this group, we’ve 2 controls (username and password). Now let’s define these properties in our template with the help of formControName attribute

<form [formGroup]="form">
    <div class="form-group">
        <label for="username">Username</label>
        <input
            formControlName="username"
            id="username"
            type="text"
            class="form-control">
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input
            formControlName="password"
            id="password"
            type="text"
            class="form-control">
    </div>
    <button class="btn btn-primary" type="submit">Sign Up</button>
</form>

Now save the files and open it into the browser.

Now, if you open angular.io and search for formgroupdirective, you’ll see that this directive is defined in ReactiveFormsModule so all the directives for building reactive forms are defined in a separate module called ReactiveFormsModule.

So we need to explicitly import into our main module. So let’s go to the app.module.ts

imports: [
  BrowserModule,
  FormsModule,
  ReactiveFormsModule
],

And of course, our auto import plugin automatically adds the import statement on the top.

import { FormsModule, ReactiveFormsModule } from "@angular/forms";

Now if you go back to the browser you’ll see no error message in the console now. Everything is working perfectly.

Adding Validation

Now let’s add the validation to this form. In the previous article, when we were building template driven forms we were using html5 attributes. But here when we’re building reactive forms we’ll not use these html5 attributes. We assign validators when we’re creating FormControl object.

First argument is the initial state and the 2^nd argument is validator object and its type is ValidatorFn or ValidatorFn[]

So what is ValidatorFn?

In Angular, we’ve a class called Validators. So all the Validators we have in our template driven forms, and they exist here as well. These validators or methods defined in this class. So here we’ve different methods,

• Validators.required() 
• Validators.minlength()
• Validators.maxlength()
• Validators.pattern()
• Validators.email()

And obviously, all of these methods are static. So we can access them with the class name.

username: new FormControl('', Validators.required)

Note I’m not calling required() here, we’re simply passing the reference to the constructor function because the 2^nd argument for the constructor of FormControl requires validatorFn which is basically a function reference

export class SignupFormComponent {
  form = new FormGroup({
    username: new FormControl('', Validators.required),
    password: new FormControl('', Validators.required)
  });
}

Now we want to add the valdation messages. We already know that we can access the component fields directly in the component html files.

<div class="form-group">
    <label for="username">Username</label>
    <input
        formControlName="username"
        id="username"
        type="text"
        class="form-control">
    <div *ngIf="form" class="alert alert-danger">
        Username is Required.
    </div>
</div>

Now form is the instance of FormGroup class and here we’ve the method called get() and from here we can get access to any FormControl object inside this group. So,

<div *ngIf="form.get('username').touched && form.get('username').invalid" class="alert alert-danger">
    Username is Required.
</div>

Now let’s see in the browser if our code is working properly,

Now our code is little bit noisy and we need to cleanup this code. So come back to the component and here we can define the property that gives us access to this username FormControl object. So remember properties, they look like fields from the outside but internally they are methods actually. So here we define getter to call the username()

export class SignupFormComponent {
  form = new FormGroup({
    username: new FormControl('', Validators.required),
    password: new FormControl('', Validators.required)
  });

  get username() {
    return this.form.get('username');
  }
}

And now in signup-form.component.html

<form [formGroup]="form">
    <div class="form-group">
        <label for="username">Username</label>
        <input
            formControlName="username"
            id="username"
            type="text"
            class="form-control">
        <div *ngIf="username.touched && username.invalid" class="alert alert-danger">
            Username is Required.
        </div>
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input
            formControlName="password"
            id="password"
            type="text"
            class="form-control">
    </div>
    <button class="btn btn-primary" type="submit">Sign Up</button>
</form>

This is the final code. And if you run the application in the browser, it is working fine.

Different Validation Errors

Now let’s see how to add multiple validators and how to show the different validation error messages in the browser.

export class SignupFormComponent {
  form = new FormGroup({
    username: new FormControl('', [
      Validators.required,
      Validators.minLength(3)
    ]),
    password: new FormControl('', Validators.required)
  });

  get username() {
    return this.form.get('username');
  }
}

Now let’s display specific error messages.

<div *ngIf="username.touched && username.invalid" class="alert alert-danger">
    <div *ngIf="username.errors.required">Username is Required.</div>
    <div *ngIf="username.errors.minlength">Username should be minimum {{ username.errors.minlength.requiredLength }} characters.</div>
</div>

Now let’s test the application. And yes it is working fine.

Implementing Custom Validation

Let’s see how to implement custom validator function. Now come on to the Angular documentation and search for validatorFn. It is an interface as it is indicated with I in search. And if we read the documentation of this function we’ll see that in this interface functions represents with this signature.

Function that takes AbstractControl as parameter and returns ValidationErrors or null. In the Typescript article, we learned that we use interfaces defined a Shape or object. We can use interfaces to define the shape of function as well. Any function that matches above signature is considered a ValidatorFn. We can define this function anywhere in our application but it is better to put all the ValidatorFn inside a class. This way we can encapsulate them in a single place.

So back in VS Code, We add a new file ‘username.validators.ts’ in signup-form folder. Here we export a class and define the functions which functionality we want.

import { AbstractControl, ValidationErrors } from "@angular/forms";

export class UsernameValidators {
    cannotContainSpace(control: AbstractControl) : ValidationErrors | null {
        if ((control.value as string).indexOf(' ') >= 0) {
            // We should return Validation Errors
        }
    }
}

Now back again to the Angular documentation and search for ValidationErrors

And here we see, this ValidationErrors represent an object that has one or more key value pairs, keys are string and values can be anything. So in our case,

if ((control.value as string).indexOf(' ') >= 0) {
    return { cannotContainSpace}
}

And for another scenario, if we are going to implement that built in required validator, the key here would be required.

if ((control.value as string).indexOf(' ') >= 0) {
    return { required }
}

To come back to the point; so the value can be anything, if we want to supply some details to the user then we need to add an object here otherwise we can add simple type like true here.

if ((control.value as string).indexOf(' ') >= 0) {
    return { cannotContainSpace: true };
}

And as for another example, if we’re going to build the built-in minLength validator, our object here will be like this,

if ((control.value as string).indexOf(' ') >= 0) {
    return { minlength: {
        requiredLength: 10,
        actualLength: control.value.length
    }};
}

So if you want to provide details  to the client, you use a complex object as a value here. Now let’s undo this, and come back to the cannotContainSpace. So if the validation fails, we return the validationerrors object or null.

export class UsernameValidators {
    cannotContainSpace(control: AbstractControl) : ValidationErrors | null {
        if ((control.value as string).indexOf(' ') >= 0) {
            return { cannotContainSpace: true };
        }
        return null;
    }
}

One last step, in order to access this cannotContainSpace() method to the outside without having to create an instance of the class, we decorate this method with static.

import { AbstractControl, ValidationErrors } from "@angular/forms";

export class UsernameValidators {
    static cannotContainSpace(control: AbstractControl) : ValidationErrors | null {
        if ((control.value as string).indexOf(' ') >= 0) {
            return { cannotContainSpace: true };
        }
        return null;
    }
}

So here we have customValidator, now we need to import it into our component. Now let’s consume it in the component.

form = new FormGroup({
  username: new FormControl('', [
    Validators.required,
    Validators.minLength(3),
    UsernameValidators.cannotContainSpace
  ]),
  password: new FormControl('', Validators.required)
});

Before going any further, we just emphasize that in this demo I put this custom validator inside signup-form folder because this is the only place we’re using this validator. In a large complex applications, chances are you might have different components that use the same validator. If that’s the case you need to put all these validators in a common place. For example, add a folder ‘common’ in ‘app’ folder and inside we can place validators.

Now let’s define the validation message for this custom validator.

<div *ngIf="username.touched && username.invalid" class="alert alert-danger">
    <div *ngIf="username.errors.required">Username is Required.</div>
    <div *ngIf="username.errors.minlength">Username should be minimum {{ username.errors.minlength.requiredLength }} characters.</div>
    <div *ngIf="username.errors.cannotContainSpace">Username cannot contain space.</div>
</div>

Here cannotContainSpace is the key which we defined in the return statement here.

if ((control.value as string).indexOf(' ') >= 0) {
    return { cannotContainSpace: true };
}

Now let’s try this validation in the browser.

Asynchronous Operations

Sometimes we need to call the server to validate a given value. For example here we want to call the server to see if this username is taken or not. So let’s go and implement the custom validator. So back in the UsernameValidators class and here we’ll add another static method.

static shouldBeUnique(control: AbstractControl) : ValidationErrors | null {
}

Now to implement this method, we don’t want to call to server yet because we’ve not covered the http services yet and how we connect through http services in Angular. So let’s make it simple and simulate a call to the server.

static shouldBeUnique(control: AbstractControl) : ValidationErrors | null {
    if (control.value === 'usama')
        return { shouldBeUnique: true };
    return null;
}

So the username is usama, we assume it is taken otherwise the username is unique. And it is really very simple implementation.

What should we do to simulate the call to the server? Well calling the server is what we classify as an Asynchronous Operation. What is an Asynchronous Operation? When we call the server there is going to be little bit of a delay in I/O operations. That delay may be half a second or of 3 seconds or it may be 20 seconds depending upon the connection speed. In situations like that the process that is executing our code doesn’t want to block while waiting for the result coming back from the server. Because if that process blocks, user can’t interact with the browser. So that process is going to call that server behind the scenes and when the result is ready, it's going to display to the user. So this is what we call asynchronous operation. Asynchronous means none blocking (multiple tasks at a time).

Calling the server is not the only asynchronous operation in Javascript. Another example of asynchronous operation is the timeout function that you have probably seen before.

setTimeout(() => {
    console.log('ok');
}, 2000);

We can use this to simulate the call to the server. setTimeout() has callback function inside and we know that we can use the arrow functions here if callback function has no parameters. We already discussed it in our Typescript article. Now let’s move the code inside the callback function.

static shouldBeUnique(control: AbstractControl) : ValidationErrors | null {
    setTimeout(() => {
        if (control.value === 'usama')
            return { shouldBeUnique: true };
        return null;
    }, 2000);
}

setTimeout() is an asynchronous function which we can simulate this to the call to the server. It will be executed after 2k milliseconds and we don’t want to be blocked while waiting for 2 seconds.

The issue we’ve here in this code, return statement inside setTimeout() is not returning to the shouldBeUnique() function. They are just returning from the callback function that we pass to the setTimeout() function. Here we’re just simply calling setTimeout() function. If you want to get rid off this compilation error, we need to return something on the same scope of setTimeout() function.

static shouldBeUnique(control: AbstractControl) : ValidationErrors | null {
    setTimeout(() => {
        if (control.value === 'usama')
            return { shouldBeUnique: true };
        return null;
    }, 2000);

    return null;
}

Now the compilation error is gone. However we can’t use this validator function inside our component because this function will always return null which means no error. So the issue we’ve here we’re dealing with asynchronous operation. When we’re building validator, it involves asynchronous operation and we need to use a different signature for our validator function.

Asynchronous Validations

Back in our component, here we create the FormControl object.

form = new FormGroup({
  username: new FormControl('', Validators.required),
  password: new FormControl('', Validators.required)
});

So far we’ve seen these 2 parameters. The 1^st one is the initial value and the 2^nd one is more or more validator function. Now let’s take a look at the 3^rd parameter. Here we’ve async validator,

And as you can see the type of the parameter is either AsyncValidatorFn or an array of AsyncValidatorFn. Let’s go back to Angular website and look at the declaration of this interface.

Now look at the signature of this function. Just like before this validator function takes parameter of type AbstractControl but the return type is a little bit different. Previously the return type was ValdiationErrors object or null. Now it is the promise of ValidationErrors or Observable of ValidationErrors or null. So basically this function should either return a promise or observable.

What are these classes (promise, observable)

In javascript, we use promises and observables to work with asynchronous operations. And here we discuss the promise, we’ll see observable later. We want our validator function to return promise of validation errors or null. First of all, study Promise in Javascript to get an idea about Promise.

So now let’s go back and modify our validator function to return a promise.

static shouldBeUnique(control: AbstractControl) : Promise<ValidationErrors | null> {
    return new Promise()

    setTimeout(() => {
        if (control.value === 'usama')
            return { shouldBeUnique: true };
        return null;
    }, 2000);
    return null;
}

Now when we create the Promise object, here is the screenshot of constructor.

Now the complex thing has started, it is quite difficult to understand this concept. It's too complicated. Let’s try to understand.

The reason it looks complicated is because of error function syntax. And here we’ve 3 error functions and we’ll simplify them one by one.

Look at the first one here,

(value?: T | PromiseLike<T>) => void

This error function represents function with this parameter.

(value? : T | PromiseLike<T>)

Which is either a value which might be optional or another Promise. So this function takes parameter and returns void. And all this is the parameter of resolve parameter here. Let’s simplify this and get rid of this error function syntax. Just remember,

resolve: (value?: T | PromiseLike<T>) => void

resolve is a function that takes a value and returns void.

Now look at the 2^nd error function,

(reason? : any) => void

This function takes parameter called reason which is optional and the type of this parameter is any. And as you can see this function returns void. And once again,

reject: (reason? : any) => void

reject: (reason? : any) => void

this function is the type of reject parameter here. So let’s simplify this once again, but keep in mind reject is a function that takes an optional parameter called reason and returns void.

Now we’ve another error function

executor: (resolve, reject) => void

the function that takes 2 parameters (resolve and reject). And both these parameters are functions. So this function takes these 2 parameters and returns void. And this function is the type of executor which is the parameter of constructor of the Promise class.

Now back again in code and here we need to apply 2 parameters resolve and reject

return new Promise((resolve, reject))

One important thing is when you’re using resolve and reject here. Don’t import any statement. We’ve only 1 import statement here,

import { AbstractControl, ValidationErrors } from "@angular/forms";

So be aware. Otherwise you’ll see the error while using resolve and reject in your coode.

Now we know that both these parameters are functions. So this goes to code block. And this arrow function is the void function, we already know. We use resolve parameter to return a value with the consumer of this Promise so whoever is interested in this Promise when our asynchronous function completes, we want to give them some value. We use this resolve function to return a value. So instead of return true, we call resolve(true)

static shouldBeUnique(control: AbstractControl) : Promise<ValidationErrors | null> {
    return new Promise((resolve, reject) => {
        resolve(true);
    });

    setTimeout(() => {
        if (control.value === 'usama')
            return { shouldBeUnique: true };
        return null;
    }, 2000);

    return null;
}

And in case of failure, we’re gonna use reject parameter. And in reject, we can optionally specify the reason of failure.

return new Promise((resolve, reject) => {
    reject('error');
});

And if it is the complex object with details then we can create the object inside reject().

So now that we have the promise object and now we move the setTimeout() code into the body of executor function.

static shouldBeUnique(control: AbstractControl) : Promise<ValidationErrors | null> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (control.value === 'usama')
                return { shouldBeUnique: true };
            return null;
        }, 2000);
    });

   // Remember: it is for demo purpose, it is actually not part of real implementation.
    return null;
}

So now here we have the asynchronous operation when this operation completes, you want to return the value, the consumer of this promise. So instead of returning ValidationErrors object here, we're going to call resolve and give the object into it.

if (control.value === 'usama')
    resolve({ shouldBeUnique: true });

And similarly instead of returning null, we use resolve(null)

static shouldBeUnique(control: AbstractControl) : Promise<ValidationErrors | null> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (control.value === 'usama')
                resolve({ shouldBeUnique: true });
            else
                resolve(null);
        }, 2000);
    });
}

So this is how we implement an async validator. We can use these parameters (resolve and reject) and either return some value to the consumer of this promise or return an error. Now finally we need to register this in our FormControl object,

export class SignupFormComponent {
  form = new FormGroup({
    username: new FormControl('',
      Validators.required,
      UsernameValidators.shouldBeUnique),
    password: new FormControl('', Validators.required)
  });

  get username() {
    return this.form.get('username');
  }
}

Now to display this validation error, we should go to our template and add one more div with validation error message.

<div *ngIf="username.touched && username.invalid" class="alert alert-danger">
    <div *ngIf="username.errors.required">Username is Required.</div>
    <div *ngIf="username.errors.minlength">Username should be minimum {{ username.errors.minlength.requiredLength }} characters.</div>
    <div *ngIf="username.errors.cannotContainSpace">Username cannot contain space.</div>
    <div *ngIf="username.errors.shouldBeUnique">Username is already taken.</div>
</div>

Now let’s test this,

We can see the error message is showing but it will show on the screen after 2 seconds because we’ve a delay in setTimeout() of 2s. And our browser is not blocking, it is working in the delay as well.

Showing a Loader Image

When working with async validator you may want to display the loader image while the asynchronous operation is in progress. Implementation is very easy, let’s see how can we implement this feature.

Let’s add this div containing message just below the input username

<div class="form-group">
        <label for="username">Username</label>
        <input
            formControlName="username"
            id="username"
            type="text"
            class="form-control">
        <div>Checking for Uniqueness...</div>
        <div *ngIf="username.touched && username.invalid" class="alert alert-danger">
            <div *ngIf="username.errors.required">Username is Required.</div>
            <div *ngIf="username.errors.minlength">Username should be minimum {{ username.errors.minlength.requiredLength }} characters.</div>
            <div *ngIf="username.errors.cannotContainSpace">Username cannot contain space.</div>
            <div *ngIf="username.errors.shouldBeUnique">Username is already taken.</div>
        </div>
    </div>

So we wanto to display this div while asynchronous is waiting for the result to come back from the server. But how do we know if our asynchronous validator is in progress? We know that

formControlName="username"

this username is a property in our component and references to FormControl object. Our FormControl has a property called pending. Pending returns true if at least one async validator is in progress. So,

<div *ngIf="username.pending">Checking for Uniqueness...</div>

Validating the Form on Submit

While async validators are useful for validating input fields sometimes we need to do validation upon submitting the forms to the server. Imagine instead of a sign up form we’re building login form. In this case, we need to submit both the username and password to the server in order to see if this is a valid login or not. We can just validate the username and password. So let’s see how to add validation when submitting the form.

So back in component, we add ngSubmit directive and define the function in the component. First in the top here we handle ngSubmit event. Once again to referesh your memory, we’ve ngForm that is apply to all form elements by default. And this event exposes on output property or an event called ngSubmit. So we can use it in event binding expression.

<form [formGroup]="form" (ngSubmit)="login()">
</form>

Now back in our component. Here we're going to call the server to see if username and password is valid or not. Once again, we simplify things. So now don’t worry about calling the server but in the future we're going to have a separate class called service which talks to the server. Let’s imagine,

login() {
  let isValid = authService.login(this.form.value);
  if (!isValid) {
    this.form.setErrors({
      invalidLogin: true
    });
  }
}

The name of that service class is authService and this has method login. Here we need to pass json object in the login method. So in this json object we’ve 2 properties (username and password). Now when we call this login method eventually we get the value from server, most likely boolean that determines if the username and password are valid or not. So if isValid is false, now here we want to add the validation errors to the form. Here in SignupComponent we have FormGroup class with form instance. As we know that FormGroup and FormControl classes derive from AbstractControl which defines the common properties and methods. And one of these methods is setErrors. And we’re using setErrors at form level. If you want to set setErrors at individual control level, we should call this method on a particular control object i.e.

this.username.setErrors

But here we set the validation errors at form level. And in setErrors, here we add validation errors object just like when we implemented custom validator. So

this.form.setErrors({
  invalidLogin: true
});

Now let’s revert back to make it work, this was just for the demo purposes. Because here we don't have any service. So, the final code is

login() {
  this.form.setErrors({
    invalidLogin: true
  });
}

So basically whenever we submit the form, we're going to get this error in any condition. Now back in the template place this div is just below the form html element, above all the form-group divs

<div class="alert-alert-danger"></div>

Now we want to add this only if our form has errors. So once again here we use ngIf

<div *ngIf="form.errors" class="alert-alert-danger">
    The username or password is invalid.
</div>

Now let’s test the application in the browser. Initially we don’t have any errors. But when we click this even without filling the form, we get this validation error.

So here is our final code for component.ts and its template,

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from "@angular/forms";
import { UsernameValidators } from './username.validators';

@Component({
  selector: 'signup-form',
  templateUrl: './signup-form.component.html',
  styleUrls: ['./signup-form.component.css']
})
export class SignupFormComponent {
  form = new FormGroup({
    username: new FormControl('',
      Validators.required,
      UsernameValidators.shouldBeUnique),
    password: new FormControl('', Validators.required)
  });

  login() {
    this.form.setErrors({
      invalidLogin: true
    });
  }

  get username() {
    return this.form.get('username');
  }
}

Signup.component.html code is

<form [formGroup]="form" (ngSubmit)="login()">
    <div *ngIf="form.errors" class="alert alert-danger">
        The username or password is invalid.
    </div>
    <div class="form-group">
        <label for="username">Username</label>
        <input
            formControlName="username"
            id="username"
            type="text"
            class="form-control">
        <div *ngIf="username.pending">Checking for Uniqueness...</div>
        <div *ngIf="username.touched && username.invalid" class="alert alert-danger">
            <div *ngIf="username.errors.required">Username is Required.</div>
            <div *ngIf="username.errors.minlength">Username should be minimum {{ username.errors.minlength.requiredLength }} characters.</div>
            <div *ngIf="username.errors.cannotContainSpace">Username cannot contain space.</div>
            <div *ngIf="username.errors.shouldBeUnique">Username is already taken.</div>
        </div>
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input
            formControlName="password"
            id="password"
            type="text"
            class="form-control">
    </div>
    <button class="btn btn-primary" type="submit">Sign Up</button>
</form>

Nested FormGroups

So this form we have here is a simple form. We’ve one group with 2 controls inside group.

export class SignupFormComponent {
  form = new FormGroup({
    username: new FormControl(''),
    password: new FormControl('')
  });

  get username() {
    return this.form.get('username');
  }
}

In a large complex applications, you might have a form with multiple subgroups. So let’s see how to implement that. Imagine this username and password controls are part of the larger form. And in that form, we’re going to have a subgroup called account. So here in FormGroup object, we add the key called account and instead of creating a new FormControl, here we create FormGroup with an object and inside this group we’ve properties. And also you need to update your username() method as well where you should have fully qualified path of username.

export class SignupFormComponent {
  form = new FormGroup({
    account: new FormGroup({
      username: new FormControl(''),
      password: new FormControl('')
    })
  });

  get username() {
    return this.form.get('account.username');
  }
}

Now let’s go back to our template, and here our html template is

<form [formGroup]="form">
    <div class="form-group">
        <label for="username">Username</label>
        <input
            formControlName="username"
            id="username"
            type="text"
            class="form-control">
        <div *ngIf="username.pending">Checking for Uniqueness...</div>
        <div *ngIf="username.touched && username.invalid" class="alert alert-danger">
            <div *ngIf="username.errors.required">Username is Required.</div>
            <div *ngIf="username.errors.minlength">Username should be minimum {{ username.errors.minlength.requiredLength }} characters.</div>
            <div *ngIf="username.errors.cannotContainSpace">Username cannot contain space.</div>
            <div *ngIf="username.errors.shouldBeUnique">Username is already taken.</div>
        </div>
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input
            formControlName="password"
            id="password"
            type="text"
            class="form-control">
    </div>
    <button class="btn btn-primary" type="submit">Sign Up</button>
</form>

Note that we’re using formControlName=”username” associated the input field with the FormControl object that we created in our component. And if we go to the browser, here we’ll see the error,

It is because username is no longer at root control. Now it is the part of Group called account. So in Angular, as we have the directive called formControlName we have another directive called formGroupName. So we create on more div and move username password divs inside that div.

<form [formGroup]="form">
    <div formGroupName="account">
        <div class="form-group">
            <label for="username">Username</label>
            <input
                formControlName="username"
                id="username"
                type="text"
                class="form-control">
            <div *ngIf="username.pending">Checking for Uniqueness...</div>
            <div *ngIf="username.touched && username.invalid" class="alert alert-danger">
                <div *ngIf="username.errors.required">Username is Required.</div>
                <div *ngIf="username.errors.minlength">Username should be minimum {{ username.errors.minlength.requiredLength }} characters.</div>
                <div *ngIf="username.errors.cannotContainSpace">Username cannot contain space.</div>
                <div *ngIf="username.errors.shouldBeUnique">Username is already taken.</div>
            </div>
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input
                formControlName="password"
                id="password"
                type="text"
                class="form-control">
        </div>
    </div>
    <button class="btn btn-primary" type="submit">Sign Up</button>
</form>

Now when angular access the username FormControl. He’ll automatically get an idea it is lying under formGroup account. And now if we go back to the browser, the error is gone. This is how we use nested group in the form.

FormArray

Sometimes we need to work with array of objects in a form. Let’s see something new with some practical.

First of all make a new component NewCourseFormComponent

PS C:\Users\Ami Jan\HelloWorld\MyFirstAngularProject> ng g c NewCourseForm

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

@Component({
  selector: 'app-new-course-form',
  templateUrl: './new-course-form.component.html',
  styleUrls: ['./new-course-form.component.css']
})
export class NewCourseFormComponent {
  form = new FormGroup({
    topics: new FormArray([])
  });
}

When we’re dealing with an array of objects, instead of FormControl we use FormArray class. The first argument of FormArray is the elements which we’ll add dynamically here. Now let’s go back to our template

<form>
  <input
    type="text" class="form-control"
    (keyup.enter)="addTopic(topic)" #topic>
</form>

Here we’re passing reference to this input field as the method argument. Now let’s define the addTopic() method.

export class NewCourseFormComponent {
  form = new FormGroup({
    topics: new FormArray([])
  });

  addTopic(topic: HTMLInputElement) {

  }
}

Here we’ve applied type annotation because somebody is reading code. They may think topic is the json object and represents actual topic. But it is actually Html input element so here we use HTMLInputElement

Now we need to get the reference of topics property which is a FormArray. Once we get this then we can push a new value into this array. So what we do,

addTopic(topic: HTMLInputElement) {
  this.form.get('topics')
}

Now this get() method returns an AbstractControl object and AbstractControl doesn’t have push method because it is purely defined in FormArray class. So we need to explicitly cast this with FormArray

addTopic(topic: HTMLInputElement) {
  (this.form.get('topics') as FormArray).push()
}

Now push method expects AbstractControl. Now once again, just to refresh the memory AbstractControl is the base class of FormControl, FormGroup and FormArray.

So all these classes are essentially AbstractControl and we can use them here in push arguments.

Now in this application, each topic is a simple value. So we’re going to pass FormControl object here in push() method. In your application, each item may be complex object then you would add FormGroup object here.

Now let’s initialize it with the value we have in input field.

export class NewCourseFormComponent {
  form = new FormGroup({
    topics: new FormArray([])
  });

  addTopic(topic: HTMLInputElement) {
    (this.form.get('topics') as FormArray).push(new FormControl(topic.value));
    topic.value = '';
  }
}

topic.value = ‘’ is used for to clear the input textbox on first time enter hit.

Now we implemented addTopic() method. Now let’s go back to our template and write some markup to render all the topics

<form>
  <input
    type="text" class="form-control"
    (keyup.enter)="addTopic(topic)" #topic>
  <ul class="list-group">
    <li
      *ngFor="let topic of form.get('topics').controls"
      class="list-group-item">
      {{ topic.value }}
    </li>
  </ul>
</form>

form.get(‘topic’) returns FormArray object and here we have a property called controls. So this way we can iterate over all the FormControl objects inside this array. Now let’s test the application up to this point

Now before going any further, let’s refactor the code little bit.

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

@Component({
  selector: 'app-new-course-form',
  templateUrl: './new-course-form.component.html',
  styleUrls: ['./new-course-form.component.css']
})
export class NewCourseFormComponent {
  form = new FormGroup({
    topics: new FormArray([])
  });

  addTopic(topic: HTMLInputElement) {
    this.topics.push(new FormControl(topic.value));
    topic.value = '';
  }

  get topics() {
    return this.form.get('topics') as FormArray;
  }
}

Similarly go back to the template and in the loop, refactor the code.

<ul class="list-group">
  <li
    *ngFor="let topic of topics.controls"
    class="list-group-item">
    {{ topic.value }}
  </li>
</ul>

Now let’s implement the remove functionality,

<ul class="list-group">
  <li
    *ngFor="let topic of topics.controls"
    (click)="removeTopic(topic)"
    class="list-group-item">
    {{ topic.value }}
  </li>
</ul>

We’re passing topic instance of FormControl to the removeTopic as an argument. Now back in our component.

export class NewCourseFormComponent {
  form = new FormGroup({
    topics: new FormArray([])
  });

  addTopic(topic: HTMLInputElement) {
    this.topics.push(new FormControl(topic.value));
    topic.value = '';
  }

  removeTopic(topic: FormControl) {
    let index = this.topics.controls.indexOf(topic);
    this.topics.removeAt(index);
  }

  get topics() {
    return this.form.get('topics') as FormArray;
  }
}

Now let’s test the application, and you’ll see it is working on clicking the items they are removing automatically.

FormBuilder

Now we’ve simplified the code. And removed all the additional methods that we don’t need here. So here we have form object.

export class NewCourseFormComponent {
  form = new FormGroup({
    topics: new FormArray([])
  });
}

Now let’s add one more property name of FormControl. So now we have all the directives of AbstractControl class

export class NewCourseFormComponent {
  form = new FormGroup({
    name: new FormControl(),
    topics: new FormArray([])
  });
}

And to make it more comprehensive, we add one more somegroup inside form.

export class NewCourseFormComponent {
  form = new FormGroup({
    name: new FormControl(),
    contact: new FormGroup({
      email: new FormControl(),
      phone: new FormControl()
    }),
    topics: new FormArray([])
  });
}

Now there is a cleaner way to write the above same code, here we’ve FormBuilder class in Angular for building forms. So first we add constructor and inject FormBuilder object here. And we’ve 3 methods with instance of FormBuilder.

Now as we have defined the form with FormGroup, let’s try to rewrite the code with FormBuilder.

constructor(fb: FormBuilder){
  fb.group({
    name: fb.control()
  });
}

But fb.control is not the cleaner way to implement. So when we want to create control, we need to pass an array and the elements we mention here will be used as the arguments to the FormControl object. So let’s say here we have 2 arguments.

name: new FormControl(‘’, Validators.required)

Now to rewrite the same code using FormBuilder in this array

export class NewCourseFormComponent {
  form = new FormGroup({
    name: new FormControl('', Validators.required),
    contact: new FormGroup({
      email: new FormControl(),
      phone: new FormControl()
    }),
    topics: new FormArray([])
  });

  constructor(fb: FormBuilder){
    fb.group({
      name: ['', Validators.required]
    });
  }
}

This syntax is little bit shorter,

export class NewCourseFormComponent {
  form = new FormGroup({
    name: new FormControl('', Validators.required),
    contact: new FormGroup({
      email: new FormControl(),
      phone: new FormControl()
    }),
    topics: new FormArray([])
  });

  constructor(fb: FormBuilder){
    fb.group({
      name: ['', Validators.required],
      contact: fb.group({
        email: [],
        phone: []
      }),
      topics: fb.array([])
    });
  }
}

Now compare both approaches and we’ll get to the point that the 2^nd approach is much cleaner. But it is completely on your personal preference. One more thing, FormBuilder object is not massively used in our practical life. We just find it in online tutorials. So finally, we need to get the result and store it in our form field. So,

export class NewCourseFormComponent {
  form;

  constructor(fb: FormBuilder){
    this.form = fb.group({
      name: ['', Validators.required],
      contact: fb.group({
        email: [],
        phone: []
      }),
      topics: fb.array([])
    });
  }
}

So this is how we use FormBuilder class.

Recap The Things

So with reactive forms we build our form explicitly in the code inside our component. And now our template code becomes also very simple.

<form [formGroup]="form">
  <input formControlName="name">
  <div formGroupName="contact">
    <input formControlName="email">
    <input formControlName="phone">
  </div>
  <!-- if we have formArray in our component -->
  <ul>
    <li *ngFor="let topic of topics.controls">
      {{ topic.value }}
    </li>
  </ul>
</form>

We use  a few directives here to associate the controls we created in component to the elements of this form. There are 3 directives we need to remember in Reactive Forms.

• formGroup
• formControlName
• formGroupName

What We Have Learned

Now let’s we make the confirm password form. So create a new component.

PS > ng g c changepassword

And here we make the form elements in code.

export class ChangepasswordComponent {
  form: FormGroup;

  constructor(fb: FormBuilder) {
    this.form = fb.group({
      oldPassword: ['', Validators.required],
      newPassword: ['', Validators.required],
      confirmPassword: ['', Validators.required]
    });
  }
}

Now back to component template. Here we create the form.

<form [formGroup]="form">
</form>

Now with the help of Zencoding, we create our html elements.

(div.form-group>label+input[type='password'].form-control)*3+button.btn.btn-primary Press TAB

And it will generate the code, something like that.

<form [formGroup]="form">
  <div class="form-group">
    <label for=""></label>
    <input type="password" class="form-control">
  </div>
  <div class="form-group">
    <label for=""></label>
    <input type="password" class="form-control">
  </div>
  <div class="form-group">
    <label for=""></label>
    <input type="password" class="form-control">
  </div>
  <button class="btn btn-primary"></button>
</form>

Now let’s add the labels here in the form and now we need to associate each input field with the FormControl object that we created in our component.

<form [formGroup]="form">
  <div class="form-group">
    <label for="">Old Password</label>
    <input formControlName="oldPassword" type="password" class="form-control">
  </div>
  <div class="form-group">
    <label for="">New Password</label>
    <input formControlName="newPassword" type="password" class="form-control">
  </div>
  <div class="form-group">
    <label for="">Confirm Password</label>
    <input formControlName="confirmPassword" type="password" class="form-control">
  </div>
  <button class="btn btn-primary">Change Password</button>
</form>

Now our html form is ready. And if we focus out from the input textbox, it will become red bordered which means required validation is working.

Now we need to add Validation Errors. So back in our templates after each input field we’ll create the div for validation error messages.

<div class="form-group">
  <label for="">Old Password</label>
  <input formControlName="oldPassword" type="password" class="form-control">
  <div
    *ngIf="form.get('oldPassword')"
    class="alert alert-danger">
  </div>
</div>

This is how we access the oldPassword form control in template. But it is lengthy and if we use oldPassword control at multiple places then we need to write it again and again in all the places. So let’s move it in the property of component.

export class ChangepasswordComponent {
  form: FormGroup;

  constructor(fb: FormBuilder) {
    this.form = fb.group({
      oldPassword: ['', Validators.required],
      newPassword: ['', Validators.required],
      confirmPassword: ['', Validators.required]
    });
  }

  get oldPassword() { return this.form.get('oldPassword'); }
  get newPassword() { return this.form.get('newPassword'); }
  get confirmPassword() { return this.form.get('confirmPassword'); }
}

Now back in the template,

<div
  *ngIf="oldPassword.touched && oldPassword.invalid"
  class="alert alert-danger">
  Old Password Is Required.
</div>

Actually we’ve 2 types of validation errors. One is for required and other is for asynchronous validator. Asynchronous validators are the ones we have not implemented yet. So here we’ve multiple validation messages. So, we create a separate div for each message.

<form [formGroup]="form">
  <div class="form-group">
    <label for="">Old Password</label>
    <input formControlName="oldPassword" type="password" class="form-control">
    <div
      *ngIf="oldPassword.touched && oldPassword.invalid"
      class="alert alert-danger">
      <div *ngIf="oldPassword.errors.required">Old Password Is Required.</div>
    </div>
  </div>
  <div class="form-group">
    <label for="">New Password</label>
    <input formControlName="newPassword" type="password" class="form-control">
    <div
      *ngIf="newPassword.touched && newPassword.invalid"
      class="alert alert-danger">
      <div *ngIf="newPassword.errors.required">New Password Is Required.</div>
    </div>
  </div>
  <div class="form-group">
    <label for="">Confirm Password</label>
    <input formControlName="confirmPassword" type="password" class="form-control">
    <div
      *ngIf="confirmPassword.touched && confirmPassword.invalid"
      class="alert alert-danger">
      <div *ngIf="confirmPassword.errors.required">Confirm Password Is Required.</div>
    </div>
  </div>
  <button class="btn btn-primary">Change Password</button>
</form>

Now let’s test the application up to this point.

Now let’s implement async validator for the old password. So in changepassword folder, create a new file (password.validators.ts)

import { AbstractControl } from '@angular/forms';

export class PasswordValidators {
    static validOldPassword(control: AbstractControl) {

    }
}

You might be thinking that we’re not explicitly mentioning the Promise return type here. Actually it is not necessary right now, because we don’t really need it.

export class PasswordValidators {
    static validOldPassword(control: AbstractControl) {
        return new Promise((resolve) => {
            if (control.value !== '1234')
                resolve({ invalidOldPassword: true});
            resolve(null);
        });
    }
}

Now let’s consume this validOldPassword method in our changepassword component.

constructor(fb: FormBuilder) {
  this.form = fb.group({
    oldPassword: ['',
      Validators.required,
      PasswordValidators.validOldPassword
    ],
    newPassword: ['', Validators.required],
    confirmPassword: ['', Validators.required]
  });
}

Now let’s define the error message in the template.

<div class="form-group">
  <label for="">Old Password</label>
  <input formControlName="oldPassword" type="password" class="form-control">
  <div
    *ngIf="oldPassword.touched && oldPassword.invalid"
    class="alert alert-danger">
    <div *ngIf="oldPassword.errors.required">Old Password Is Required.</div>
    <div *ngIf="oldPassword.errors.invalidOldPassword">
      Old Password Is Invalid.
    </div>
  </div>
</div>

Now let’s test the application

And look it is working. Only 1234 old Password is allowed here.

Now the last point, we want to implement confirm password validation. Now with confirm password, we need to know this form as a whole because we need to access 2 controls (new Password and confirm Password fields). So back to our Password validator, I’m gonna define another validator.

static passwordsShouldMatch(control: AbstractControl) {
}

And this AbstractControl should be FormGroup. In other words, we wanna apply this validator at form level and you know the form is an instance of FormGroup class and because FormGroup derives from AbstractControl. So it can be passed to an Angular at runtime to this method. So here we need to get the reference of new password and confirm password fields. So the complete logic of the 2^nd function and the whole file is,

import { AbstractControl } from '@angular/forms';

export class PasswordValidators {
    static validOldPassword(control: AbstractControl) {
        return new Promise((resolve) => {
            if (control.value !== '1234')
                resolve({ invalidOldPassword: true});

            resolve(null);
        });
    }

    static passwordsShouldMatch(control: AbstractControl) {
        let newPassword = control.get('newPassword');
        let confirmPassword = control.get('confirmPassword');

        if(newPassword.value !== confirmPassword.value)
            return { passwordsShouldMatch: true };

        return null;
    }
}

So back to our component, just like we can apply validators to each control, we can also apply them with group. So here

fb.group()

this group method of FormBuilder class takes two object parameters. The 1^st parameter is where we define our controls and the 2^nd one is another object where we add extra stuff to this FormGroup. So if we see the intellisense of group() we’ll get to know how can we implement this function.

constructor(fb: FormBuilder) {
  this.form = fb.group({
    oldPassword: ['',
      Validators.required,
      PasswordValidators.validOldPassword
    ],
    newPassword: ['', Validators.required],
    confirmPassword: ['', Validators.required]
  }, {
    validator: PasswordValidators.passwordsShouldMatch
  });
}

Validator is the key here. Now finally let’s go back to our template and add the Error Message by adding div.

<div class="alert alert-danger"></div>

And we want to render this only if the passwords don’t match. So we can get the reference of form here.

<div *ngIf="form.invalid && form.errors.passwordsShouldMatch" class="alert alert-danger">
  Password Don't Match.
</div>

As we’re implementing the validation messages before as well so we always use formcontrol property with validation messages, but here we’re accessing the complete form and checking the state of its html elements by implementing the function. So we’re using form.errors.passwordsShouldMatch, so don’t be confused. And one more check we need to implement here is if confirmPassword property has the value it means if it is valid then show the validation message.

<div *ngIf="confirmPassword.valid && form.invalid && form.errors.passwordsShouldMatch" class="alert alert-danger">
  Password Don't Match.
</div>

Now run the application and see the results.