Added password confirmation validation

Still needs formatting warnings for the form

package.json

@@ -30,6 +30,7 @@
     "core-js": "2.4.1",
     "moment": "2.18.1",
     "ng2-charts": "1.5.0",
+    "ng2-validation-manager": "^0.3.1",
     "ngx-bootstrap": "1.6.6",
     "rxjs": "5.3.0",
     "ts-helpers": "1.1.2",

src/app/pages/register.component.html

@@ -4,7 +4,7 @@
       <div class="col-md-6">
         <div class="card mx-4">
           <div class="card-block p-4">
-			<form [formGroup]="signup" (ngSubmit)="onSubmit()">
+			<form [formGroup]="signup.getForm()" (ngSubmit)="onSubmit()">
             <h1>Register</h1>
             <p class="text-muted">Create your account</p>
             <div class="input-group mb-3">
@@ -70,7 +70,7 @@
 
             <div class="input-group mb-4">
               <span class="input-group-addon"><i class="icon-lock"></i></span>
-              <input type="password" class="form-control" formControlName="password" placeholder="Repeat password">
+              <input type="password" class="form-control" formControlName="confirmpassword" placeholder="Repeat password">
             </div>
 
             <button type="submit" class="btn btn-block btn-success">Create Account</button>

src/app/pages/register.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { Validators, FormBuilder, FormGroup } from '@angular/forms';
+import { ValidationManager } from "ng2-validation-manager";
 import { Http, Response } from '@angular/http';
 import { ApiService } from '../providers/api-service';
 import {Router } from '@angular/router';
@@ -9,42 +10,47 @@ import 'rxjs/add/operator/map';
   templateUrl: 'register.component.html',
   providers: [ApiService]
 })
+
 export class RegisterComponent {
-  signup: FormGroup;
+  signup: ValidationManager;
   ageRanges: Object[];
   
   constructor(
 	private http: Http,
 	private formBuilder: FormBuilder,
 	private router: Router,
-	private api: ApiService
+	private api: ApiService,
 	) {	  
 	  this.api.getAgeRanges()
 		.subscribe(
-			result => {
-				console.log(result);
-				this.ageRanges = result.ages;
-			}
+		  result => {
+		    console.log(result);
+		    this.ageRanges = result.ages;
+		  }
 		);
-	  this.signup = this.formBuilder.group({
-		token:        ['', [Validators.required]],
-		usertype:     ['', [Validators.required]],
-		name:         ['', [Validators.required]],
-		full_name:    ['', [Validators.required]],
-		display_name: ['', [Validators.required]],
-		email:        ['', [Validators.required]],
-		postcode:     ['', [Validators.required]],
-		street_name:  ['', [Validators.required]],
-		town:         ['', [Validators.required]],
-		age_range:    ['', [Validators.required]],
-		password:     ['', [Validators.required]],
+	  this.signup = new ValidationManager({
+		token:        'required',
+		usertype:     'required',
+		name:         'required',
+		full_name:    'required',
+		display_name: 'required',
+		email:        'required',
+		postcode:     'required',
+		street_name:  'required',
+		town:         'required',
+		age_range:    'required',
+		password:     'required',
+		confirmpassword: 'required|equalTo:password'
 	  });
   }
   
   onSubmit() {
-    console.log(this.signup.value);
+	  
+    console.log(this.signup.isValid());
 	
-	this.api
+    console.log(this.signup.getForm().value);
+	
+	/* this.api
       .register(this.signup.value)
       .subscribe(
         result => {
@@ -54,7 +60,7 @@ export class RegisterComponent {
         error => {
           console.log( error._body );
         }
-      );
+      );*/
   }