Refactoring

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

@@ -27,7 +27,7 @@
         </mat-option>
       </mat-select>
     </div>
-    <mat-form-field class="phone-input">
+    <mat-form-field class="phone-input" [floatLabel]="showLabel">
       <mat-label translate>phone-input.phone-input-label</mat-label>
       <input
         formControlName="phoneNumber"
@@ -35,6 +35,7 @@
         matInput
         [placeholder]="phonePlaceholder"
         [pattern]="phoneNumberPattern"
+        (focus)="focus()"
         autocomplete="off"
         [required]="required">
       <mat-error *ngIf="phoneFormGroup.get('phoneNumber').hasError('required')">

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

@@ -59,6 +59,15 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
   @Input() enableFlagsSelect = true;
   @Input() required = true;
 
+  private floatLabel = 'always';
+  get showLabel(): string {
+    return this.floatLabel;
+  }
+  @Input()
+  set showLabel(value) {
+    this.floatLabel = value ? 'always' : 'never';
+  }
+
   allCountries: Array<Country> = [];
   phonePlaceholder: string;
   countryCallingCode: string;
@@ -82,11 +91,9 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
     }
     this.phoneFormGroup = this.fb.group({
       country: [this.defaultCountry, []],
-      phoneNumber: [
+      phoneNumber: [null, this.required ? [Validators.required] : []]
-        this.countryCallingCode,
-        this.required ? [Validators.required, Validators.pattern(phoneNumberPattern), this.validatePhoneNumber()] : []
-      ]
     });
+    this.phoneFormGroup.get('phoneNumber').setValidators([Validators.pattern(phoneNumberPattern), this.validatePhoneNumber()]);
 
     this.valueChange$ = this.phoneFormGroup.get('phoneNumber').valueChanges.subscribe(() => {
       this.updateModel();
@@ -97,13 +104,15 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
         const code = this.countryCallingCode;
         this.getFlagAndPhoneNumberData(value);
         let phoneNumber = this.phoneFormGroup.get('phoneNumber').value;
-        if (code !== this.countryCallingCode && phoneNumber) {
+        if (phoneNumber) {
+          if (code !== this.countryCallingCode && phoneNumber.includes(code)) {
             phoneNumber = phoneNumber.replace(code, this.countryCallingCode);
           } else {
             phoneNumber = this.countryCallingCode;
           }
           this.phoneFormGroup.get('phoneNumber').patchValue(phoneNumber);
         }
+      }
     });
 
     this.phoneFormGroup.get('phoneNumber').valueChanges.subscribe(value => {
@@ -123,6 +132,13 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
     }
   }
 
+  focus() {
+    const phoneNumber = this.phoneFormGroup.get('phoneNumber');
+    if (!phoneNumber.value) {
+      phoneNumber.patchValue(this.countryCallingCode);
+    }
+  }
+
   getFlagAndPhoneNumberData(country) {
     if (this.enableFlagsSelect) {
       this.flagIcon = this.getFlagIcon(country);

ui-ngx/src/app/shared/models/country.models.ts

@@ -1,3 +1,19 @@
+///
+/// Copyright © 2016-2022 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
 import { Injectable } from '@angular/core';
 
 export interface Country {

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -3355,7 +3355,7 @@
         "phone-input-label": "Phone number",
         "phone-input-required": "Phone number is required",
         "phone-input-validation": "Phone number is invalid or not possible",
-        "phone-input-pattern": "Invalid phone number. Should be in E.164 format, ex. +19995550123."
+        "phone-input-pattern": "Invalid phone number. Should be in E.164 format, ex. {{phoneNumber}}"
     },
     "custom": {
         "widget-action": {