username works!

src/app/app.module.ts

@@ -24,10 +24,11 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 
 import { LoginComponent } from './login/login.component';
 import { RegisterComponent } from './register/register.component';
+
 import { RegistrationService } from './registration.service';
 
-import { CreditCardValidator } from './creditcardvalidator.directive'
+//import { CreditCardValidator } from './creditcardvalidator.directive'
-import { CreditCardValidatorX } from './creditcardvalidatorx.directive'
+import { UsernameValidator } from './validators/username.validator'
 
 
 
@@ -37,9 +38,7 @@ import { CreditCardValidatorX } from './creditcardvalidatorx.directive'
     GameGridComponent,
     ViewCardComponent,
     LoginComponent,
-    RegisterComponent,
+    RegisterComponent
-    CreditCardValidator,
-    CreditCardValidatorX
   ],
   imports: [
     BrowserModule,
@@ -56,7 +55,7 @@ import { CreditCardValidatorX } from './creditcardvalidatorx.directive'
     MatPaginatorModule,
     MatFormFieldModule
   ],
-  providers: [GamesService, RegistrationService],
+  providers: [GamesService, RegistrationService, UsernameValidator],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/register/register.component.ts

@@ -3,6 +3,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { FormBuilder, FormGroup, FormControl, Validators, AbstractControl } from '@angular/forms';
 
 import { RegistrationService } from '../registration.service';
+import { UsernameValidator } from '../validators/username.validator'
 
 
 //import { ValidateUserName } from '../validators/username.validator';
@@ -19,7 +20,8 @@ export class RegisterComponent implements OnInit {
 	//userNameValidator = new UserNameValidator(null);
 
 	constructor(
-		private registrationService: RegistrationService
+		private registrationService: RegistrationService,
+		private usernameValidator: UsernameValidator
 		){ }
 
 	ngOnInit() {
@@ -79,6 +81,7 @@ export class RegisterComponent implements OnInit {
 			}else if( key == "ValidateUserName" ){
 				//formValidators.push( this.validateUserName );
 				//formValidators.push( CreditCardValidator.validateCcNumber );
+				formValidators.push( this.usernameValidator.checkUsername.bind( this.usernameValidator ) );
 			}
 		}
 		return formValidators;

src/app/validators/username.validator.ts

@@ -1,31 +1,35 @@
-
+import { Injectable } from '@angular/core';
-import { AbstractControl } from '@angular/forms';
+import { FormControl } from '@angular/forms';
 import { RegistrationService } from '../registration.service';
  
+@Injectable()
+export class UsernameValidator {
  
-export class ValidateUserName{
+  debouncer: any;
  
-constructor(
+  constructor(private registrationService: RegistrationService){
-		private RS: RegistrationService
-		){ }
  
- validateUserName( control: AbstractControl ){
+  }
-	//var RS = new RegistrationService(null);
-	/*
-	this.registrationService2.validateUserName( control.value ).subscribe( data => {
-		console.log( data );
-		if( control.value != data.username ){
-		return{
-			validUserName: true
-		};
-	}
-	return null;
  
-	});
+  checkUsername(control: FormControl): any {
-	*/
-	}
  
+    clearTimeout(this.debouncer);
+ 
+    return new Promise(resolve => {
+ 
+      this.debouncer = setTimeout(() => {
+ 
+        this.registrationService.validateUserName(control.value).subscribe((res) => {
+          if(res.ok){
+            resolve(null);
+          }
+        }, (err) => {
+          resolve({'usernameInUse': true});
+        });
+ 
+      }, 1000);     
+ 
+    });
+  }
  
 }
-
-