So far all, the validations we have implemented are only in the template file using the basic HTML attributes. In this section, we will learn to implement the validations in the component using the model-driven forms.

In previous sections, we have learned to create a form using the formControl and formGroup classes in our Component class. We will continue to use the same registration form to extend and implement validations now.

We are adding the validation code in our component by adding validations in the register.component.ts file. Take a look at the code we will add in the file:

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

 @Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
 registerForm = new FormGroup({ 
   fullName: new FormControl('',[Validators.required, 
   Validators.maxLength(15)]), emailAddress: 
   new FormControl('',[Validators.pattern('[a-zA-Z]*')]),
   password: new FormControl('',[Validators.required]),
   termsConditions: new FormControl('',[Validators.required])
 });
 
 constructor() { }

 ngOnInit() {
 }

 register()
 {
   console.log(this.registerForm.value);
 }
}

In the preceding code, you will notice that we have imported the required modules, FormGroup, FormControl, and Validators into our Component class. We had already imported and used FormGroup and FormControl. The Validators module is the only additional module that we have imported now. We are passing the validators as options to FormControl. For fullname we are adding the validators as required and maxLength. Note that we can pass multiple validators for each FormControl. Similarly, for email address form control, we are passing a validator pattern, which has a regular expression check on it. We have made all the required changes and validations in our component.

Now it's time to update our template register.component.html file:

<div>
   <form [formGroup]="registerForm" (ngSubmit)="register()">
<h3 class="text-center text-primary">New User Registration</h3>
   <div class="form-group">
<label for="fullName">Your Name</label><br>
<input type="text" formControlName="fullName" class="form-control">
</div>
<div class="form-group">
<label for="emailAddress">Enter Email Address:</label><br>
   <input type="text" formControlName="emailAddress" class="form-control">
</div>
<div class="form-group">
<label for="password">Password:</label><br>
<input type="password" formControlName="password" class="form-control">
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" formControlName="termsConditions" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
I agree to Terms and Conditions
</label>
</div>
</div>
<button type="submit" class="btn btn-primary" [disabled]="!registerForm.valid">Sign in</button>
 
</form>
</div>

The HTML template is the same as the one we had created earlier for our model-driven form. We have added some more functionality to the form. Notice that we have added the disabled attribute to the Submit button, which will disable the form if any form elements are empty or invalid. 

See, I told you, our template file will just be a placeholder and almost all of the action happens in our Component class. 

Now, let's serve the app using the ng serve command and we should see the output, as shown in the following screenshot:

If you see the preceding screenshot, jump on your desk. As we have now learned and implemented forms using both template-driven and model-driven approaches.

If you paid attention to the examples covered during the entire chapter, you will also notice that we have created methods to process the form data.

In the next section, we focus exclusively on the same and learn some best practices to process form data.