Блог

У меня есть 3 поля ввода: marca (марка), modelo (модель) и combustible (тип двигателя). Мне нужно, чтобы modelo и combustible изначально были отключены, но были включены при выборе марки (marca).

   <ion-item>
    <ion-label stacked>Marca</ion-label>
    <ion-select [(ngModel)]="marca" (ionChange)="getModelos($event, marca)" cancelText="Cancelar" placeholder="Selecciona una marca...">
      <ion-option *ngFor="let marca of marcas" value="{{marca.code}}">{{marca.name}}</ion-option>
    </ion-select>
  </ion-item>


  <ion-item>
    <ion-label stacked>Modelo</ion-label>
    <ion-select [(ngModel)]="modelo" (ionChange)="getVersiones($event, modelo, combustible)" cancelText="Cancelar" placeholder="Selecciona un modelo..." ng-disabled="!modelo">
      <ion-option value="" selected="true">Selecciona...</ion-option>
      <ion-option *ngFor="let modelo of modelos" value="{{modelo.code}}">{{modelo.name}}</ion-option>
    </ion-select>
  </ion-item>

<ion-item>
  <ion-label stacked>Combustible</ion-label>
  <ion-select [(ngModel)]="combustible" (ionChange)="itemTapped($event, combustible)" cancelText="Cancelar" placeholder="Selecciona una marca..." disabled>
    <ion-option value="" selected="true">Selecciona...</ion-option>
    <ion-option *ngFor="let combustible of combustibles" value="{{combustible.code}}">{{combustible.value}}</ion-option>
  </ion-select>
</ion-item>
  

Для этого вы можете использовать атрибут «disabled» ion-select и модель «marca»:

 <ion-item>
    <ion-label stacked>Marca</ion-label>
    <ion-select [(ngModel)]="marca" (ionChange)="getModelos($event, marca)" cancelText="Cancelar" placeholder="Selecciona una marca...">
      <ion-option *ngFor="let marca of marcas" value="{{marca.code}}">{{marca.name}}</ion-option>
    </ion-select>
  </ion-item>


  <ion-item>
    <ion-label stacked>Modelo</ion-label>
    <ion-select [disabled]="marca" [(ngModel)]="modelo" (ionChange)="getVersiones($event, modelo, combustible)" cancelText="Cancelar" placeholder="Selecciona un modelo...">
      <ion-option value="" selected="true">Selecciona...</ion-option>
      <ion-option *ngFor="let modelo of modelos" value="{{modelo.code}}">{{modelo.name}}</ion-option>
    </ion-select>
  </ion-item>

<ion-item>
  <ion-label stacked>Combustible</ion-label>
  <ion-select [disabled]="marca" [(ngModel)]="combustible" (ionChange)="itemTapped($event, combustible)" cancelText="Cancelar" placeholder="Selecciona una marca...">
    <ion-option value="" selected="true">Selecciona...</ion-option>
    <ion-option *ngFor="let combustible of combustibles" value="{{combustible.code}}">{{combustible.value}}</ion-option>
  </ion-select>
</ion-item>