updated RegisterComponent to FormBuilder and added proper input validation

src/app/account/register/register.component.html

@@ -17,29 +17,30 @@
           </label>
         </mat-form-field>
 
-        <!--<div formGroupName="passwordGroup">-->
+        <div formGroupName="password">
           <mat-form-field appearance="fill" hintLabel="At least 15 characters.">
             <mat-label>Password</mat-label>
             <label>
-              <input matInput formControlName="password" type="password" required minlength="15">
+              <input matInput formControlName="first" type="password" required minlength="15">
             </label>
           </mat-form-field>
 
           <mat-form-field appearance="fill">
             <mat-label>Confirm password</mat-label>
             <label>
-              <input matInput formControlName="password2" type="password" required minlength="15"
+              <input matInput formControlName="second" type="password" required minlength="15"
-                     [errorStateMatcher]="">
+                     [errorStateMatcher]="passwordErrorStateMatcher">
             </label>
+            <mat-error *ngIf="form.get('password').hasError('mismatch')">Passwords don't match.</mat-error>
           </mat-form-field>
-        <!--</div>-->
+        </div>
 
         <div fxLayout="row" fxLayoutAlign="space-evenly center">
-          <a mat-button href="/login">Login</a>
+          <button mat-flat-button color="primary" [disabled]="loading">
-          <button [disabled]="loading" class="mat-button">
             <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
             Sign up
           </button>
+          <a mat-button routerLink="/login">Login</a>
         </div>
       </form>
     </mat-card-content>

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({
+  form = this.formBuilder.group({
-    username: new FormControl(''),
+    username: ['', Validators.required],
-    email: new FormControl(''),
+    email: ['', [Validators.required, Validators.email]],
-    password: new FormControl(''),
+    password: this.formBuilder.group({
-    password2: new FormControl(''),
+      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;