search

angular-material-extensions / select-country

Angular Material component that allow users to select a country or nationality with an autocomplete feature
https://angular-material-extensions.github.io/select-country/
MIT License
126 stars 40 forks source link

Bug - Text not rendered on mat-stepper reactive forms #95

Closed simionrobert closed 7 months ago

simionrobert commented 2 years ago

Describe the bug The label is not shown when using angular material stepper with reactive forms and ngx-translate. It will appear only if the user clicks on it:

<mat-select-country label="{{'Tara *'|translate}}" [itemsLoadSize]="10" formControlName="tara">
</mat-select-country>

Screenshots Screenshot 2022-03-12 211509 Screenshot 2022-03-12 211538

Desktop (please complete the following information):

nosTa1337 commented 8 months ago

I have the same issue.

It seems like the translation takes place to late. The issue occurs in <div matformfieldnotchedoutline="" class="mdc-notched-outline ng-tns-c35-12 mdc-notched-outline--no-label ng-star-inserted" ng-reflect-open="false" ng-reflect-label-width="200">. It adds "no-label.

My solution is to translate it in the ts file and add a listener as well to translate it there, than use the variable in the HTML [label] tag.

//  needed as the mat-country-picker has a bug with the translation inline. seems like the translation takes place to late and no-label is used instead.
    this.countryTranslation = this.translateService.instant('CHECKOUT.FORM.COUNTRY');

    this.translateService.onLangChange.subscribe(() => {
      this.countryTranslation = this.translateService.instant('CHECKOUT.FORM.COUNTRY');
    })`