Completed validation for phone number in contact form

Author: VisheshRaju

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

@@ -21,16 +21,16 @@
             [appNoSpace]="noSpace"
             autocomplete="off"
             (blur)="blur()" />
-          <mat-error *ngIf="errorMessage">{{errorMessage}}</mat-error>
           <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 :
-              'Please enter a valid '+name
+              (control.errors.incorrect) ? control.errors.incorrect : ''
             }}
           </mat-error>
         </mat-form-field>
+        errorMessage: {{control.errors | json}}
     </div>
   </ng-container>
 

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

@@ -25,7 +25,7 @@ export class InputComponent implements OnInit {
   @Input() label = '';
   @Input() hasHint = false;
   @Input() hintMessage = '';
-  @Input() errorMessage = '';
+  @Input() errorMessage: string | boolean = null;
   @Input() extraClass: string | string[] = '';
 
   // directives
@@ -43,12 +43,6 @@ export class InputComponent implements OnInit {
   // tslint:disable-next-line: no-output-on-prefix
   @Output() onBlur: EventEmitter<boolean>;
 
-  ngOnChanges(change) {
-    if (change.errorMessage) {
-      this.ref.detectChanges();
-    }
-  }
-
   ngOnInit() { }
 
   blur() {

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

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { UtilityFunctions } from 'src/app/utilities/app.utility';
 // Get an instance of `PhoneNumberUtil`.
@@ -17,11 +17,12 @@ export class MobileNumberComponent implements OnInit {
   countryCodeSearchVal: FormControl;
   countryCodes: Array<any> = [];
   filterCountryCode: Array<any>;
-  errorMessage: string;
+  errorMessage: string | boolean;
   selectedCodeName: any;
 
   constructor(
-    private util: UtilityFunctions
+    private util: UtilityFunctions,
+    private ref: ChangeDetectorRef
   ) {
     // Get the country code list
     const reg = phoneUtil.getSupportedRegions();
@@ -59,15 +60,17 @@ export class MobileNumberComponent implements OnInit {
     if (codeName) {
       this.selectedCodeName = codeName;
     }
-    if (this.mobileNumber.valid && this.mobileNumber.value && this.selectedCodeName) {
+    if ( (this.mobileNumber.valid || this.mobileNumber.errors.incorrect)
+        && this.mobileNumber.value && this.selectedCodeName) {
       const phoneCheck = phoneUtil.parseAndKeepRawInput(this.mobileNumber.value, this.selectedCodeName);
       if (!phoneUtil.isValidNumber(phoneCheck)) {
-        this.errorMessage = 'Please enter a valid phone number';
+        /* If phone invalid set error */
+        this.mobileNumber.setErrors({incorrect: 'Please enter a valid phone number'});
+        this.mobileNumber.markAsTouched();
       } else {
-        this.errorMessage = null;
+        /* If phone valid remove the error */
+        this.mobileNumber.setErrors(null);
       }
-    } else {
-      this.errorMessage = null;
     }
   }