Added custom form validations

Author: VisheshRaju

src/app/modules/examples/components/contact-form/contact-form.component.html

@@ -1,5 +1,7 @@
 <div class="contact-form">
+    <h1>Contact me !</h1>
     <div class="contact-mobile-number">
+        <label>Phone number: </label>
         <app-mobile-number [group]="contactForm"
             [contryCode]="contactForm.controls['contryCode']"
             [mobileNumber]="contactForm.controls['mobileNumber']"></app-mobile-number>

src/app/modules/examples/components/contact-form/contact-form.component.scss

@@ -1,3 +1,10 @@
+@import '../../../../../assets/scss/_variable';
+
 .contact-form {
     padding: 20px;
+    display: grid;
+    align-content: center;
+    justify-content: center;
+    text-align: center;
+    height: $content-height;
 }

src/app/modules/examples/components/contact-form/contact-form.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { FormControl, FormGroup } from '@angular/forms';
+import { UtilityFunctions } from 'src/app/utilities/app.utility';
 
 @Component({
   selector: 'app-contact-form',
@@ -10,16 +11,23 @@ export class ContactFormComponent implements OnInit {
 
   contactForm: FormGroup;
 
-  constructor() { }
+  constructor(
+    private util: UtilityFunctions
+  ) { }
 
   ngOnInit(): void {
     this.initialise();
   }
 
   initialise() {
     this.contactForm = new FormGroup ({
-      mobileNumber: new FormControl('', [Validators.required, Validators.maxLength(15), Validators.minLength(6)]),
-      contryCode: new FormControl('', Validators.required),
+      mobileNumber: new FormControl('', [
+        this.util.requiredValidator('phone number'),
+        this.util.minlengthValidator('Phone number', 6),
+        this.util.maxlengthValidator('Phone number', 15),
+        this.util.onlyNumberValidator('phone number')
+      ]),
+      contryCode: new FormControl('', this.util.requiredValidator('phone code')),
     });
   }
 

src/app/shared/ui-components/input/input.component.html

@@ -22,14 +22,11 @@
             autocomplete="off"
             (blur)="blur()" />
           <mat-error *ngIf="control.touched && control.invalid">
-            {{
-              (control.errors.required) ? "Please enter "+name.toLowerCase() : 
-              (control.errors.minlength) ? name + " must be greater than " + (control.errors.minlength.requiredLength-1) : 
-              (control.errors.maxlength) ? name + " must be lesser than " + control.errors.maxlength.requiredLength :
-              (control.errors.incorrect) ? control.errors.incorrect : ''
-            }}
+            <!-- Easy way to display any kind of error in HTML
+                  -> Get the first error key and display the error string in it-->
+            {{ control.errors[objectFn.keys(control.errors)[0]] }}
           </mat-error>
         </mat-form-field>
     </div>
-  </ng-container>
+</ng-container>
 

src/app/shared/ui-components/input/input.component.ts

@@ -43,6 +43,9 @@ export class InputComponent implements OnInit {
   // tslint:disable-next-line: no-output-on-prefix
   @Output() onBlur: EventEmitter<boolean>;
 
+  // HTML helpers
+  objectFn = Object;
+
   ngOnInit() { }
 
   blur() {

src/app/shared/ui-components/mobile-number/mobile-number.component.html

@@ -1,7 +1,7 @@
 <div class="mobile-number">
   <div class="mobile-code">
     <mat-form-field [formGroup]="group" class="mobile-code-form">
-      <mat-select placeholder="" #singleSelect name="countryCodeNum" [formControl]="contryCode">
+      <mat-select placeholder="Phone code" #singleSelect name="countryCodeNum" [formControl]="contryCode">
         <mat-option>
           <ngx-mat-select-search [formControl]="countryCodeSearchVal"
               placeholderLabel="Search phone code" 

src/app/shared/ui-components/mobile-number/mobile-number.component.ts

@@ -56,6 +56,7 @@ export class MobileNumberComponent implements OnInit {
     this.countryCodeSearchVal = new FormControl('');
   }
 
+  /* Function to check phone number validity */
   isPhoneValid(codeName = null) {
     if (codeName) {
       this.selectedCodeName = codeName;

src/app/utilities/app.utility.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { FormControl } from '@angular/forms';
 
 @Injectable({
   providedIn: 'root',
@@ -25,4 +26,98 @@ export class UtilityFunctions {
     }
   }
 
+  /**
+   * Custom form validators
+   * @Description Below functions are used intead for actual form controls.
+   *              Because we can customise error messages accordingly here
+   *              rather than having to handing in HTML for each field.
+   *              We can customise a lot.
+   */
+  // Required validator function
+  public requiredValidator(fieldName: string = '', type: 'select' | 'input' = 'input') {
+    return (control: FormControl) => {
+      const name = (control.value) ?  control.value.toString() : '';
+      if (!name || !name.trim() || name.trim() === '') {
+        if (type === 'select') {
+          return {
+            required: 'Please choose your ' + fieldName
+          };
+        } else {
+          return {
+            required: 'Please enter your ' + fieldName
+          };
+        }
+      }
+      return null;
+    };
+  }
+
+  // Required validator function
+  public maxlengthValidator(fieldName: string = '', length: number) {
+    return (control: FormControl) => {
+      const name = (control.value) ?  control.value.toString() : '';
+      if (name && !name.trim() || name.trim() === '' || (length && name.length < (length))) {
+        return {
+          maxlength: `${fieldName} can't be greater than ${length} characters`
+        };
+      }
+      return null;
+    };
+  }
+
+  // Required validator function
+  public minlengthValidator(fieldName: string = '', length: number) {
+    return (control: FormControl) => {
+      const name = (control.value) ?  control.value.toString() : '';
+      if (name && !name.trim() || name.trim() === '' || (length && name.length > (length))) {
+        return {
+          minlength: `${fieldName} can't be lesser than ${length} characters`
+        };
+      }
+      return null;
+    };
+  }
+
+  // Email form control validator function
+  public emailValidator = (fieldName: string = 'email address') => {
+    return (control: FormControl) => {
+      const email = (control.value) ?  control.value.toString() : '';
+      const regex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+      if (email && !regex.test(email)) {
+        return {
+          email: 'Please enter a valid ' + fieldName
+        };
+      }
+      return null;
+    };
+  }
+
+  // Only alpha numeric name validator
+  public onlyAlphaNameValidator(fieldName: string = '') {
+    return (control: FormControl) => {
+      const name = control.value;
+      const regex = /^[a-zA-Z_\ ]*$/;
+      if (name && !regex.test(name)) {
+        return {
+          onlyAlphaName: 'Please enter a valid ' + fieldName + '. Only aplabets, space and _ are allowed.'
+        };
+      }
+      return null;
+    };
+  }
+
+  // Custom 0nly numeric validator for form validation
+  public onlyNumberValidator(fieldName: string = '') {
+    return (control: FormControl) => {
+      const name = control.value;
+      const regex = /^[0-9]*$/;
+      if (name && !regex.test(name)) {
+        return {
+          onlyNumber: 'Please enter a valid ' + fieldName + '. Only numbers are allowed.'
+        };
+      }
+      return null;
+    };
+  }
+
 }

src/assets/scss/_variable.scss

@@ -39,4 +39,8 @@ $box-shadow-black: 5px 0px 5px #0000002e;
 $menu-icon-color: #000;
 $menu-icon-size: 30px;
 $active: #9786ff;
-$header-text: #6a5acd;
+$header-text: #6a5acd;
+
+/* Heights */
+$home-height: calc(100vh - 60px);
+$content-height: calc(100vh - 100px);

src/styles.scss

@@ -110,8 +110,8 @@ ol {
 .home {
     width: 100%;
     display: inline-flex;
-    max-height: calc(100vh - 60px);
-    min-height: calc(100vh - 60px);
+    max-height: $home-height;
+    min-height: $home-height;
     /* Side bar navigation element */
     .sidebar-nav{
         list-style: none;
@@ -176,7 +176,7 @@ ol {
     }
     .home-content {
         width: 100%;
-        height: calc(100vh - 60px);
+        height: $home-height;
     }
 }