Input properties don't update/save correctly

[Servonius]

Describe the bug I'm using the the mat-select-country inside a reactive form:

<form [formGroup]="form">
  <div formGroupName="companyAddress">
    <mat-select-country
      [label]="'COUNTRY' | translate"
      [placeHolder]="'SELECT_COUNTRY' | translate"
      appearance="fill"
      [required]="true"
      formControlName="country"
      [error]="'COUNTRY_INVALID' | translate"
      [language]="settingsService.activeLanguage$ | async"
    ></mat-select-country>
  </div>
</form>
<button
  mat-flat-button
  (click)="submit()"
  type="submit"
>
  {{ "SUBMIT" | translate }}
</button>

form = new FormGroup({
  companyAddress: new FormGroup({
    country: new FormControl<Country>(undefined),
  }),
});

submit() {
  if (this.form.invalid) {
    return;
  }

  // form valid
  console.log("submitted");
}

(Note: the FormGroups are nested because this is a minimal copy of the actual code)

But the following doesn't work:

1. the appearance isn't filled (it's outline)
2. it has no required marking
3. there is no error shown when submitting the form and the form is still valid

The translation change is sometimes triggered during runtime by the user and this is working correctly, so the text are all getting translated.

Expected behavior

1. the appearance should be fill
2. there should be a required marking
3. there should be an error shown when submitting the form and the form should be invalid

Screenshots

Desktop (please complete the following information):

• OS: Win10 22h2
• Browser: Microsoft Edge v120
• Angular: v16
• @angular-material-extensions/select-country: 16.0.0

[LukasKlement]

I'm facing the same issue: the input changes appearance from fill to outline, if I disable the input.

Here is my on submit code:

onCountrySelected() {
    this.form.controls.country.disable({ emitEvent: false });
    setTimeout(() => {
      this.form.controls.country.enable({ emitEvent: false });
    }, 0);
    setTimeout(() => {
      this.countrySelect.appearance = 'fill';
    }, 1);
  }

The reason for disabling and re-enabling the field is that the select-country component doesn't expose a blur API.

Expected behaviour:

• The appearance remains unchanged after disabling and after enabling a field

Actual behaviour:

• The appearance changed from fill to outline

[TheR3dMage]

I have the same bug, the appearance reverts to outline upon disabling. In addition, in my case the placeholder text is also forgotten and reverts to the default "Select country".

In my case the country selector needs to be enabled only if another form field is false (it's a "specify country only if different than the previous one" situation) and upon toggling it the appearance and placeholder are lost.

this._formSubscription.add(this.form.controls.getCountryFromAddress.valueChanges
      .subscribe((value: boolean | null | undefined) => {
        if (value) {
          this.form.controls.documentCountry?.setValue(null);
          this.form.controls.documentCountry?.disable();
        } else {
          this.form.controls.documentCountry?.enable();
        }
      }))

Expected behavior:

• appearance remains unchanged upon enabling
• placeholder text remains unchanged upon enabling

Actual behavior:

• appearance becomes outline upon enabling
• placeholder reverts to "Select country" upon enabling

System:

• @angular-material-extensions/select-country: 16.0.0
• Angular 16.2.12
• Angular material 16.2.12
• Browser: Chrome 124.0.6367.78 (Official Build) (64-bit)
• OS: Ubuntu 22.04.4 LTS

[Servonius]

I just upgraded to Angular 17.3.5 (with 17.0.0 of @angular-material-extensions/select-country) and the issue is still the same

[Servonius]

@AnthonyNahas are you still maintaining this project? Because this is a pretty big issue in my opinion and there was no response for quiet a while now.