workjs!

src/app/app.module.ts

@@ -26,6 +26,9 @@ import { LoginComponent } from './login/login.component';
 import { RegisterComponent } from './register/register.component';
 import { RegistrationService } from './registration.service';
 
+import { CreditCardValidator } from './creditcardvalidator.directive'
+import { CreditCardValidatorX } from './creditcardvalidatorx.directive'
+
 
 
 @NgModule({
@@ -34,7 +37,9 @@ import { RegistrationService } from './registration.service';
     GameGridComponent,
     ViewCardComponent,
     LoginComponent,
-    RegisterComponent
+    RegisterComponent,
+    CreditCardValidator,
+    CreditCardValidatorX
   ],
   imports: [
     BrowserModule,

src/app/creditcardvalidator.directive.ts

@@ -0,0 +1,31 @@
+import { Directive, forwardRef } from '@angular/core';
+import { NG_VALIDATORS, AbstractControl, ValidationErrors, Validator, FormControl } from '@angular/forms';
+
+@Directive({
+  selector: '[validCreditCard]',
+  providers: [
+    { provide: NG_VALIDATORS, useExisting: CreditCardValidator, multi: true }
+  ]
+})
+export class CreditCardValidator implements Validator {
+
+  validate(c: FormControl): ValidationErrors | null {
+    return CreditCardValidator.validateCcNumber(c);
+  }
+
+  static validateCcNumber(control: FormControl): ValidationErrors | null {
+    if (!(control.value.startsWith('37')
+      || control.value.startsWith('4')
+      || control.value.startsWith('5'))
+    ) {
+      // Return error if card is not Amex, Visa or Mastercard     
+      return { creditCard: 'Your credit card number is not from a supported credit card provider' };
+    } else if (control.value.length !== 16) {
+      console.log(control.value)
+      // Return error if length is not 16 digits
+      return { creditCard: 'A credit card number must be 16-digit long' };
+    }
+    // If no error, return null  
+    return null;
+  }
+}

src/app/creditcardvalidatorx.directive.ts

@@ -0,0 +1,56 @@
+import { Directive, forwardRef } from '@angular/core';
+import { NG_VALIDATORS, AbstractControl, ValidationErrors, Validator, FormControl } from '@angular/forms';
+import { RegistrationService } from './registration.service';
+
+@Directive({
+  selector: '[validCreditCard]',
+  providers: [
+    { provide: NG_VALIDATORS, useExisting: CreditCardValidatorX, multi: true }
+  ]
+})
+export class CreditCardValidatorX implements Validator {
+
+  constructor(
+    private registrationService2: RegistrationService
+    ){ }
+
+  validate(c: FormControl): ValidationErrors | null {
+    return CreditCardValidatorX.validateCcNumber(c);
+  }
+
+
+  validateUserName( control: FormControl ){
+  
+  this.registrationService2.validateUserName( control.value ).subscribe( data => {
+    console.log( data );
+    if( control.value != data.username ){
+    return{
+      validUserName: true
+    };
+  }
+  return null;
+
+  });
+  
+  }
+
+  static validateCcNumber(control: FormControl): ValidationErrors | null {
+    if (!(control.value.startsWith('37')
+      || control.value.startsWith('4')
+      || control.value.startsWith('5'))
+    ) {
+      // Return error if card is not Amex, Visa or Mastercard     
+      return { creditCard: 'Your credit card number is not from a supported credit card provider' };
+    } else if (control.value.length !== 16) {
+      console.log(control.value)
+      // Return error if length is not 16 digits
+      return { creditCard: 'A credit card number must be 16-digit long' };
+    }
+    // If no error, return null  
+    return null;
+  }
+
+
+
+
+}

src/app/register/register.component.html

@@ -24,7 +24,7 @@
 		</mat-form-field>
 
 		<mat-form-field class="fullWidth">
-			<input matInput placeholder="Email"
+			<input matInput placeholder="Email" validCreditCard
 				[formControlName]="'email'"
 				[id]="'email'"
 				[type]="'email'"

src/app/register/register.component.ts

@@ -4,6 +4,7 @@ import { FormBuilder, FormGroup, FormControl, Validators, AbstractControl } from
 
 import { RegistrationService } from '../registration.service';
 
+
 //import { ValidateUserName } from '../validators/username.validator';
 
 @Component({
@@ -76,12 +77,18 @@ export class RegisterComponent implements OnInit {
 			}else if( key == "max" ) {
 				formValidators.push(Validators.max(validators[key]));
 			}else if( key == "ValidateUserName" ){
-				formValidators.push( this.validateUserName );
+				//formValidators.push( this.validateUserName );
+				//formValidators.push( CreditCardValidator.validateCcNumber );
 			}
 		}
 		return formValidators;
 	}
 
+
+
+
+
+/*
 	validateUserName( control: AbstractControl ){
 	
 	this.registrationService.validateUserName( control.value ).subscribe( data => {
@@ -96,6 +103,7 @@ export class RegisterComponent implements OnInit {
 	});
 	
 	}
+	*/