Proper Working Validation added

Still needs visual validation

src/app/pages/register.component.html

@@ -15,7 +15,7 @@
 				  <option value='customer'>Customer</option>
                 </select>
             </div> -->
-			<form [formGroup]="signup.getForm()" (ngSubmit)="onSubmit()">
+			<form [formGroup]="signupForm.getForm()">
 			<div class="input-group mb-3">
               <span class="input-group-addon"><i class="icon-key"></i></span>
               <input type="text" class="form-control" formControlName="token" placeholder="Token">
@@ -46,9 +46,9 @@
             </div>
 			</form>
 			
-			<div [ngSwitch]="signup.getForm().value.usertype">
+			<div [ngSwitch]="signupForm.getForm().value.usertype">
 			<div *ngSwitchCase="'customer'" >
-			<form [formGroup]="signup.getForm()" (ngSubmit)="onSubmit()">
+			<form [formGroup]="customerForm.getForm()" (ngSubmit)="onSubmitCustomer()">
 			<div class="input-group mb-3">
               <span class="input-group-addon"><i class="icon-user"></i></span>
               <input type="text" class="form-control" formControlName="display_name" placeholder="Display Name">
@@ -75,15 +75,15 @@
             </form>
 			</div>
 			<div *ngSwitchCase="'organisation'">
-			<form [formGroup]="signup.getForm()" (ngSubmit)="onSubmit()">
+			<form [formGroup]="organisationForm.getForm()" (ngSubmit)="onSubmitOrganisation()">
 			<div class="input-group mb-3">
               <span class="input-group-addon"><i class="icon-user"></i></span>
-              <input type="text" class="form-control" formControlName="street_name" placeholder="Street Name">
+              <input type="text" class="form-control" formControlName="name" placeholder="Organisation Name">
             </div>
 			
 			<div class="input-group mb-3">
               <span class="input-group-addon"><i class="icon-user"></i></span>
-              <input type="text" class="form-control" formControlName="name" placeholder="Organisation Name">
+              <input type="text" class="form-control" formControlName="street_name" placeholder="Street Name">
             </div>
 			
 			<div class="input-group mb-3">

src/app/pages/register.component.ts

@@ -12,7 +12,9 @@ import 'rxjs/add/operator/map';
 })
 
 export class RegisterComponent {
-  signup: ValidationManager;
+  signupForm: ValidationManager;
+  customerForm: ValidationManager;
+  organisationForm: ValidationManager;
   ageRanges: Object[];
   
   constructor(
@@ -28,30 +30,83 @@ export class RegisterComponent {
 		    this.ageRanges = result.ages;
 		  }
 		);
-	  this.signup = new ValidationManager({
+	  this.signupForm = 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'
 	  });
+	  this.customerForm = new ValidationManager({
+		display_name: 'required',
+		full_name:    'required',
+		postcode:     'required',
+		age_range:    'required',
+	  });
+	  this.organisationForm = new ValidationManager({
+		name:         'required',
+		street_name:  'required',
+		town:         'required',
+		postcode:     'required',
+	  });
   }
   
-  onSubmit() {
+  onSubmitCustomer() {
 	  
-    console.log(this.signup.isValid());
+    console.log(this.signupForm.isValid());
-	
+	if (!this.signupForm.isValid() && !this.customerForm.isValid()) {
-    console.log(this.signup.getForm().value);
+		console.log("Not Valid!");
+		return;
+	}
+    let signupForm = this.signupForm.getForm().value;
+	let customerForm = this.customerForm.getForm().value;
 	
+	let data = {
+		token:        signupForm.token,
+		usertype:     signupForm.usertype,
+		email:        signupForm.email,
+		password:     signupForm.password,
+		display_name: customerForm.display_name,
+		full_name:    customerForm.full_name,
+		postcode:     customerForm.postcode,
+		age_range:    customerForm.age_range,
+	};
+	console.log(data);
 	/* this.api
-      .register(this.signup.value)
+      .register(data)
+      .subscribe(
+        result => {
+          console.log('registered!');
+		  this.router.navigate(['/dashboard']);
+        },
+        error => {
+          console.log( error._body );
+        }
+      );*/
+  }
+  onSubmitOrganisation() {
+	  
+    console.log(this.signupForm.isValid());
+	if (!this.signupForm.isValid() || !this.organisationForm.isValid()) {
+		console.log("Not Valid!");
+		return;
+	}
+    let signupForm = this.signupForm.getForm().value;
+	let organisationForm = this.organisationForm.getForm().value;
+	
+	let data = {
+		token:        signupForm.token,
+		usertype:     signupForm.usertype,
+		email:        signupForm.email,
+		password:     signupForm.password,
+		name:         organisationForm.name,
+		street_name:  organisationForm.street_name,
+		town:         organisationForm.town,
+		postcode:     organisationForm.postcode,
+	};
+	console.log(data);
+	/* this.api
+      .register(data)
       .subscribe(
         result => {
           console.log('registered!');