In the previous section while covering template-driven forms, we have created our login form for our application. It's time to do a hands-on exercise using the reactive forms. The fundamental idea behind implementing login and registration forms using different approaches is to show you the difference in implementation of each approach. There is no right or wrong approach, the decision is driven by the complexity and requirement of our forms in the applications.

In this section, we will learn to implement our new user registration form using the model-driven approach.

First, we will need to generate our register component. Run the following ng command to generate the register component:

ng g c register

The output of the preceding command is as follows:

Since we are talking about model-driven forms, all the hard work had to be done in the Component class. We will still need to have a template for our reactive forms, but we won't be adding any validations or data binding into the template.

We want our registration form to have four form elements—that is, fields for full names, email addresses, passwords, and terms and conditions.

Let's update our Component class in the register.component.ts file and create an instance of formGroup:

import { Component, OnInit } from '@angular/core';
import { FormGroup, 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(),
  emailAddress: new FormControl(''),
  password: new FormControl(''),
  termsConditions: new FormControl('')
 });
 constructor() { }

 ngOnInit() {
 }

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

}

You will notice a lot of new stuff in the preceding code. Let's take it slowly, step by step. We are importing the required modules, FormGroup and FormControl, from the angular/core. Inside the Component class, we are creating an instance of the FormGroup class, registerForm. You will notice that we are now creating multiple FormControl instances, each one for a form element that we want to add to our form. 

Is that all we need to do? For now, yes. Remember, as explained before, that reactive forms also need to have a basic template, but all the logic and validations will be inside the component, rather than the template file.

So now, let's update our template file. In the register.component.html file, add the following code:

<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">Sign in</button>
 
 </form>
</div>

In the preceding code, we are creating a dynamic reactive form. There are many important concepts that we need to understand in the preceding code. We are using the FormGroup attribute for model-driven forms. In the template-driven forms, we used ngForm. Notice carefully that for every form element, we mention the FormControlName attribute, and the value for this attribute has to be exactly the same as was mentioned in the Component class during the FormControl instance declaration. Take a pause and read the last few sentences again.

We don't have to mention ngModel for elements anymore, since data binding is tightly coupled inside the Component class itself. We have also attached a ngSubmit event, which will call the method register implemented inside the component to print the form value on the console.

Awesome. That's it. Now serve your application using the ng serve command and we should see the output as displayed in the following screenshot:

Congrats on getting your forms up and running using the approaches provided by Angular. We have learned to build forms using template-driven and model-driven approaches. In the next sections, we will learn to extend them by adding validation and custom rules.