updated RegisterComponent to FormBuilder and added proper input validation

src/app/account/register/register.component.ts

@@ -1,5 +1,10 @@
 import { Component, OnInit } from '@angular/core';
-import {EmailValidator, FormControl, FormGroup} from '@angular/forms';
+import { FormBuilder, FormGroup, ValidationErrors, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { first } from 'rxjs/operators';
+
+import { AccountService } from '../account.service';
+import { PasswordErrorStateMatcher } from './password-error-state-matcher';
 
 @Component({
   selector: 'app-register',
@@ -7,13 +12,37 @@ import {EmailValidator, FormControl, FormGroup} from '@angular/forms';
   styleUrls: ['./register.component.css']
 })
 export class RegisterComponent implements OnInit {
-  form: FormGroup = new FormGroup({
-    username: new FormControl(''),
-    email: new FormControl(''),
-    password: new FormControl(''),
-    password2: new FormControl(''),
+  form = this.formBuilder.group({
+    username: ['', Validators.required],
+    email: ['', [Validators.required, Validators.email]],
+    password: this.formBuilder.group({
+      first: ['', [Validators.required, Validators.minLength(15)]],
+      second: ['', [Validators.required, Validators.minLength(15)]],
+    },
+  { validators: this.passwordsEqual }),
   });
   loading = false;
+  passwordErrorStateMatcher = new PasswordErrorStateMatcher();
+
+  constructor(private accountService: AccountService,
+              private formBuilder: FormBuilder,
+              private router: Router,
+              ) { }
+
+  passwordsEqual(passwords: FormGroup): ValidationErrors | null {
+    const password1 = passwords.get('first');
+    const password2 = passwords.get('second');
+
+    return password1 && password2 && password1.value === password2.value ? null : { mismatch: true };
+  }
+
+  readForm() {
+    return {
+      username: this.form.get('username').value,
+      email: this.form.get('email').value,
+      password: this.form.get('password').get('first').value,
+    }
+  }
 
   onRegister() {
     this.loading = !this.loading;