Custom validator with parameter

Author: gopinav

reactive-forms/src/app/app.component.html

@@ -9,7 +9,7 @@ <h2>Registration Form</h2>
       <div *ngIf="userName.invalid && userName.touched">
         <small class="text-danger" *ngIf="userName.errors?.required">Username is required</small>
         <small class="text-danger" *ngIf="userName.errors?.minlength">Username must be at least 3 characters</small>
-        <small class="text-danger" *ngIf="userName.errors?.forbiddenName">{{userName.errors?.forbiddenName.value}} username not allowed</small>
+        <small class="text-danger" *ngIf="userName.errors?.forbiddenName">'{{userName.errors?.forbiddenName.value}}' username not allowed</small>
       </div>
     </div>
 

reactive-forms/src/app/app.component.ts

@@ -23,7 +23,7 @@ export class AppComponent {
   // });
 
   registrationForm = this.fb.group({
-    userName: ['', [Validators.required, Validators.minLength(3), forbiddenNameValidator]],
+    userName: ['', [Validators.required, Validators.minLength(3), forbiddenNameValidator(/password/)]],
     password: [''],
     confirmPassword: [''],
     address: this.fb.group({

reactive-forms/src/app/shared/user-name.validator.ts

@@ -1,6 +1,8 @@
 import { ValidatorFn, AbstractControl } from '@angular/forms';
 
-export function forbiddenNameValidator(control: AbstractControl): {[key: string]: any} | null {
-  const forbidden = /admin/.test(control.value);
-  return forbidden ? { 'forbiddenName': { value: control.value } } : null;
+export function forbiddenNameValidator(forbiddenName: RegExp): ValidatorFn {
+  return (control: AbstractControl): { [key: string]: any } | null => {
+    const forbidden = forbiddenName.test(control.value);
+    return forbidden ? { 'forbiddenName': { value: control.value } } : null;
+  };
 }