Merge pull request #14802 from vvlladd28/bug/coutry-autocomplete/autofill

Fixed country autocomplete autofill and improved validation

ui-ngx/src/app/core/utils.ts

@@ -27,13 +27,14 @@ import { serverErrorCodesTranslations } from '@shared/models/constants';
 import { SubscriptionEntityInfo } from '@core/api/widget-api.models';
 import {
   CompiledTbFunction,
-  compileTbFunction, GenericFunction,
+  compileTbFunction,
+  GenericFunction,
   isNotEmptyTbFunction,
   TbFunction
 } from '@shared/models/js-function.models';
 import { DomSanitizer } from '@angular/platform-browser';
 import { SecurityContext } from '@angular/core';
-import { AbstractControl, ValidationErrors, Validators } from '@angular/forms';
+import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
 
 const varsRegex = /\${([^}]*)}/g;
 const emailRegex = /^[A-Z0-9_!#$%&'*+/=?`{|}~^.-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
@@ -998,3 +999,12 @@ export const validateEmail = (control: AbstractControl): ValidationErrors | null
   return emailRegex.test(control.value) ? null : {email: true};
 };
 
+export const objectRequired = (): ValidatorFn => {
+  return (control: AbstractControl): ValidationErrors | null => {
+    const value = control.value;
+    if (value && !isObject(value)) {
+      return { objectRequired: true };
+    }
+    return null;
+  };
+}

ui-ngx/src/app/shared/components/country-autocomplete.component.html

@@ -15,14 +15,19 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="countryFormGroup" class="mat-block" subscriptSizing="{{subscriptSizing}}" [appearance]="appearance">
+<mat-form-field [formGroup]="countryFormGroup" class="mat-block" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
   <mat-label>{{ labelText }}</mat-label>
+  @if (countryFormGroup.get('country').value?.flag) {
+    <span matPrefix>
+      {{ countryFormGroup.get('country').value.flag }}
+    </span>
+  }
   <input matInput type="text"
          #countryInput
+         #autocompleteTrigger="matAutocompleteTrigger"
          formControlName="country"
          (focusin)="onFocus()"
-         (blur)="onTouched()"
+         (blur)="checkInputAndAutoSelect()"
-         [required]="required"
          [matAutocomplete]="countryAutocomplete">
   <button *ngIf="countryFormGroup.get('country').value && !disabled"
           type="button"
@@ -55,4 +60,7 @@
   <mat-error *ngIf="countryFormGroup.get('country').hasError('required')">
     {{ requiredText }}
   </mat-error>
+  <mat-error *ngIf="countryFormGroup.get('country').hasError('objectRequired')">
+    {{ objectRequiredText }}
+  </mat-error>
 </mat-form-field>

ui-ngx/src/app/shared/components/country-autocomplete.component.scss

@@ -0,0 +1,29 @@
+/**
+ * Copyright © 2016-2026 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.
+ */
+:host ::ng-deep {
+  .mat-form-field-appearance-fill {
+    .mat-mdc-form-field-icon-prefix {
+      align-self: baseline;
+    }
+  }
+
+  .mat-mdc-form-field-icon-prefix {
+    & > * {
+      color: initial;
+      padding-left: 8px;
+    }
+  }
+}

ui-ngx/src/app/shared/components/country-autocomplete.component.ts

@@ -14,7 +14,18 @@
 /// limitations under the License.
 ///
 
-import { Component, ElementRef, EventEmitter, forwardRef, Input, OnInit, Output, ViewChild } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  forwardRef,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+  ViewChild
+} from '@angular/core';
 import { Country, CountryData } from '@shared/models/country.models';
 import {
   ControlValueAccessor,
@@ -23,14 +34,16 @@ import {
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   ValidationErrors,
-  Validator
+  Validator,
+  Validators
 } from '@angular/forms';
-import { isNotEmptyStr } from '@core/utils';
+import { isNotEmptyStr, objectRequired } from '@core/utils';
 import { Observable, of } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map, share, switchMap, tap } from 'rxjs/operators';
-import { SubscriptSizing, MatFormFieldAppearance } from '@angular/material/form-field';
+import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { TranslateService } from '@ngx-translate/core';
+import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
 
 interface CountrySearchData extends Country {
   searchText?: string;
@@ -39,6 +52,7 @@ interface CountrySearchData extends Country {
 @Component({
   selector: 'tb-country-autocomplete',
   templateUrl: 'country-autocomplete.component.html',
+  styleUrls: ['./country-autocomplete.component.scss'],
   providers: [
     CountryData,
     {
@@ -53,7 +67,7 @@ interface CountrySearchData extends Country {
     }
   ]
 })
-export class CountryAutocompleteComponent implements OnInit, ControlValueAccessor, Validator {
+export class CountryAutocompleteComponent implements OnInit, OnChanges, ControlValueAccessor, Validator {
 
   @Input()
   labelText = this.translate.instant('contact.country');
@@ -61,6 +75,9 @@ export class CountryAutocompleteComponent implements OnInit, ControlValueAccesso
   @Input()
   requiredText = this.translate.instant('contact.country-required');
 
+  @Input()
+  objectRequiredText = this.translate.instant('contact.country-object-required');
+
   @Input()
   autocompleteHint: string;
 
@@ -79,6 +96,8 @@ export class CountryAutocompleteComponent implements OnInit, ControlValueAccesso
 
   @ViewChild('countryInput', {static: true}) countryInput: ElementRef;
 
+  @ViewChild('autocompleteTrigger') autocompleteTrigger: MatAutocompleteTrigger;
+
   @Output()
   selectCountryCode = new EventEmitter<string>();
 
@@ -103,10 +122,24 @@ export class CountryAutocompleteComponent implements OnInit, ControlValueAccesso
               private countryData: CountryData,
               private translate: TranslateService) {
     this.countryFormGroup = this.fb.group({
-      country: ['']
+      country: ['', objectRequired()]
     });
   }
 
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.required) {
+      const requiredChanges = changes.required;
+      if (requiredChanges.currentValue !== requiredChanges.previousValue) {
+        if (requiredChanges.currentValue) {
+          this.countryFormGroup.get('country').addValidators(Validators.required);
+        } else {
+          this.countryFormGroup.get('country').removeValidators(Validators.required);
+        }
+        this.countryFormGroup.get('country').updateValueAndValidity();
+      }
+    }
+  }
+
   ngOnInit(): void {
     this.filteredCountries = this.countryFormGroup.get('country').valueChanges.pipe(
       debounceTime(150),
@@ -163,7 +196,7 @@ export class CountryAutocompleteComponent implements OnInit, ControlValueAccesso
   }
 
   displayCountryFn(country?: Country): string | undefined {
-    return country ? `${country.flag} ${country.name}` : undefined;
+    return country ? country.name : undefined;
   }
 
   onFocus() {
@@ -173,6 +206,21 @@ export class CountryAutocompleteComponent implements OnInit, ControlValueAccesso
     }
   }
 
+  checkInputAndAutoSelect() {
+    const control = this.countryFormGroup.get('country');
+    const value = control.value;
+
+    if (value && typeof value === 'string') {
+      const foundCountry = this.fetchCountries(value);
+      if (foundCountry.length === 1) {
+        control.setValue(foundCountry[0]);
+        this.autocompleteTrigger?.closePanel();
+      }
+    }
+
+    this.onTouched();
+  }
+
   textIsNotEmpty(text: string): boolean {
     return (text && text.length > 0);
   }

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

@@ -1194,6 +1194,7 @@
     "contact": {
         "country": "Country",
         "country-required": "Country is required.",
+        "country-object-required": "Please select a valid country from the list.",
         "city": "City",
         "state": "State / Province",
         "postal-code": "Zip / Postal Code",