Ionic ion-select: Как определить, когда пользователь открывал и закрывал селектор хотя бы один раз - PullRequest
0 голосов
/ 01 ноября 2019

Я использую IonSelect в форме, в которой я хочу проверить, что пользователь что-то выбрал (она изначально пуста)

Я использую универсальный обработчик blur для всех элементов управления формы, где я проверяю следующее ...

if (c.dirty || c.touched) && c.errors)
     setValidationError()

Где c - элемент управления.

Проблема с выбором состоит в том, что когда отображается диалоговое окно параметров, мы получаем событие размытияа также c.touched для элемента управления select, поэтому сразу же я получаю сообщение об ошибке, прежде чем пользователь сможет изменить выбор.

Я просто хотел бы отложить показ этого до открытия выбораодин раз, а затем закройте без выбора (например, отмена). Конечно, если пользователь что-то выбирает, ошибки проверки нет.

У кого-нибудь есть идеи, как я могу узнать, когда выбор был открыт, а затем закрыт? У меня есть попытки oncancel и многие другие события, но ни одно из них не срабатывает.

Любая помощь с благодарностью

1 Ответ

1 голос
/ 01 ноября 2019

Вы можете использовать ionCancel, как показано ниже:

В файле .html:

<ion-select [(ngModel)]="gaming" (ionCancel)="cancelSelect()">
      <ion-option value="nes">NES</ion-option>
      <ion-option value="n64">Nintendo64</ion-option>
      <ion-option value="ps">PlayStation</ion-option>
      <ion-option value="genesis">Sega Genesis</ion-option>
      <ion-option value="saturn">Sega Saturn</ion-option>
      <ion-option value="snes">SNES</ion-option>
    </ion-select>
<label *ngIf="isGamingTouched && gaming == undefined" color="red" >
  show your validation message
</label>

в файле .ts

public gaming: any;
  public isGamingTouched: boolean = false;
  constructor(public navCtrl: NavController) {

  }
  cancelSelect(){
    console.log(this.gaming);
    this.isGamingTouched = true;
  }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...