How to prevent all the childs inside an ion-item got disable when the ion-select (located in that ion-item) is disable programmatically?

In the HTML view I have this ion-list with ion-items

  <form [formGroup]="myDetailsForm">
    <ion-list class="ion-list-custom">
      <ion-item class="validate-field" lines="full">
        <ion-label
          class="item-label avn-roboto-regular avn-label"
          position="fixed"
          id="state-label"
          ><ion-input value="State" readonly></ion-input></ion-label
          >
          <ion-select name="state" formControlName="state" id="state-select">
            <ion-select-option *ngFor="let state of states" [value]="state.code"
              >{{ state.code }}</ion-select-option
            >
          </ion-select>
          <button
            ion-button
            clear
            type="button"
            (click)="showError('state', $event)"
            class="field-error-img-btn"
            item-right
            *ngIf="myDetailsForm.get('state').invalid"
          >
            <img
              class="field-error-img"
              src="assets/imgs/card_error.png"
              id="state-validate"
              alt="State error"
            />
          </button>
      </ion-item>
    </ion-list>
  </form>

It is being declare like this

    this.myDetailsForm = this.formBuilder.group({
      state: [
        {
          value: this.accountDetails.mailingAddress.state,
          disabled: this.anotherAddress || !this.isAddressEditable,
        },
      ],
    });

One of the ion-item has a ion-select which is being disable as the code below

      this.myDetailsForm.get('state')?.disable();

When the ion-select is disabled, it disable the whole ion-item, which shows the ion-label disable as well.
How can I prevent this?

1 post - 1 participant

Read full topic