Hands-On Full Stack Web Development with Angular 6 and Laravel 5

Reviewing the register form template and component

A very good example to understand model-driven forms is the register form. Let's look at register.component.html and register.component.ts:

1. Open ./Client/src/app/pages/auth/register/register.component.html and review the template input tags:

 formControlName="name"
 formControlName="email"
 formControlName="password"

It is almost the same notation we used on template-driven forms, but a little more clean. Here, we don't need the name attribute.

For the submit button event, we are just using the [formGroup]="registerForm" (ngSubmit)="onSubmit()" attribute and the bind function.

2. Now, let's create the register.component.ts. Replace its code with the following:

 import { Component, OnInit ...