-
+
{{ labelText }}
+ @if (countryFormGroup.get('country').value?.flag) {
+
+ {{ countryFormGroup.get('country').value.flag }}
+
+ }
diff --git a/ui-ngx/src/app/shared/components/country-autocomplete.component.scss b/ui-ngx/src/app/shared/components/country-autocomplete.component.scss
new file mode 100644
index 0000000000..72de6174ba
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/ui-ngx/src/app/shared/components/country-autocomplete.component.ts b/ui-ngx/src/app/shared/components/country-autocomplete.component.ts
index af7be6b1f6..728d8afcbf 100644
--- a/ui-ngx/src/app/shared/components/country-autocomplete.component.ts
+++ b/ui-ngx/src/app/shared/components/country-autocomplete.component.ts
@@ -1,5 +1,5 @@
///
-/// Copyright © 2016-2025 The Thingsboard Authors
+/// 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.
@@ -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();
@@ -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 (this.required) {
+ 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);
}
diff --git a/ui-ngx/src/app/shared/components/css.component.html b/ui-ngx/src/app/shared/components/css.component.html
index 1f6e7e27b5..9729b97e06 100644
--- a/ui-ngx/src/app/shared/components/css.component.html
+++ b/ui-ngx/src/app/shared/components/css.component.html
@@ -1,6 +1,6 @@