Phone number style changes

Author: VisheshRaju

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

@@ -1,5 +1,5 @@
 <div class="contact-form">
-    <div class="mobile-number">
+    <div class="contact-mobile-number">
         <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

@@ -0,0 +1,3 @@
+.contact-form {
+    padding: 20px;
+}

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

@@ -5,7 +5,8 @@
   </mat-form-field> -->
     <div class="form-control" [formGroup]="formGroup"
           [ngClass]="extraClass" [class.invalid]="control.touched && control.invalid">
-        <!-- <mat-form-field [formControl]="control"> -->
+        <mat-form-field>
+          <mat-label *ngIf="label">{{label}}</mat-label>
           <input matInput
             [type]="type"
             [placeholder]="placeholder"
@@ -20,16 +21,16 @@
             [appNoSpace]="noSpace"
             autocomplete="off"
             (blur)="blur()" />
-          <p *ngIf="errorMessage" class="error-message">{{errorMessage}}</p>
-          <p *ngIf="control.touched && control.invalid" class="error-message">
+          <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
             }}
-          </p>
-        <!-- </mat-form-field> -->
+          </mat-error>
+        </mat-form-field>
     </div>
   </ng-container>
 

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

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { AppConstants } from 'src/app/utilities/constants/AppConstants';
 
@@ -9,6 +9,12 @@ import { AppConstants } from 'src/app/utilities/constants/AppConstants';
 })
 export class InputComponent implements OnInit {
 
+  constructor(
+    private ref: ChangeDetectorRef
+  ) {
+    this.onBlur = new EventEmitter();
+  }
+
   @Input() appAutoFocus = false;
   @Input() formGroup: FormGroup;
   @Input() control: FormControl;
@@ -37,8 +43,10 @@ export class InputComponent implements OnInit {
   // tslint:disable-next-line: no-output-on-prefix
   @Output() onBlur: EventEmitter<boolean>;
 
-  constructor() {
-    this.onBlur = new EventEmitter();
+  ngOnChanges(change) {
+    if (change.errorMessage) {
+      this.ref.detectChanges();
+    }
   }
 
   ngOnInit() { }

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

@@ -1,17 +1,28 @@
-<mat-form-field [formGroup]="group">
-    <mat-select placeholder="" #singleSelect name="countryCodeNum" [formControl]="contryCode">
-      <mat-option>
-        <ngx-mat-select-search [formControl]="countryCodeSearchVal"
-            placeholderLabel="Search phone code" 
-            noEntriesFoundLabel="'No matching codes found'"></ngx-mat-select-search>
-      </mat-option>
-      <mat-option [value]="code['phone_code']" *ngFor="let code of filterCountryCode"
-                  (click)="isPhoneValid(code['name'])">
-        {{'+ ' + code['phone_code']}}
-        <span class="phone-code-float">({{code['name']}})</span>
-      </mat-option>
-    </mat-select>
-</mat-form-field>
-<app-input [placeholder]="'Mobile number'" [name]="'Mobile number'" [id]="'contact_mobile_number'"
-    [formGroup]="group" [control]="mobileNumber" [onlyNumber]="true"
-    [errorMessage]="errorMessage" (onBlur)="isPhoneValid()"></app-input>
+<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-option>
+          <ngx-mat-select-search [formControl]="countryCodeSearchVal"
+              placeholderLabel="Search phone code" 
+              noEntriesFoundLabel="'No matching codes found'"></ngx-mat-select-search>
+        </mat-option>
+        <mat-option [value]="code['phone_code']" *ngFor="let code of filterCountryCode"
+                    (click)="isPhoneValid(code['name'])">
+          {{'+ ' + code['phone_code']}}
+          <span class="phone-code-float">({{code['name']}})</span>
+        </mat-option>
+      </mat-select>
+      <mat-error *ngIf="contryCode.touched && contryCode.invalid">
+        {{
+          (contryCode.errors.required) ? "Please enter country code" : 'Please enter a valid country code'
+        }}
+      </mat-error>
+    </mat-form-field>
+  </div>
+  <div class="mobile-input">
+    <app-input [placeholder]="'Mobile number'" [name]="'Mobile number'" [id]="'contact_mobile_number'"
+      [formGroup]="group" [control]="mobileNumber" [onlyNumber]="true"
+      [errorMessage]="errorMessage" (onBlur)="isPhoneValid()"></app-input>
+  </div>
+</div>

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

@@ -0,0 +1,9 @@
+.mobile-number {
+    display: inline-flex;
+    .mobile-code-form {
+        max-width: 100px;
+    }
+    .mobile-input {
+        margin-left: 10px;
+    }
+}

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

@@ -59,10 +59,12 @@ export class MobileNumberComponent implements OnInit {
     if (codeName) {
       this.selectedCodeName = codeName;
     }
-    if (this.mobileNumber.valid && this.mobileNumber.value) {
+    if (this.mobileNumber.valid && 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';
+      } else {
+        this.errorMessage = null;
       }
     } else {
       this.errorMessage = null;