Прослушивание событий, вызванных отклонением данных в машинописи - PullRequest
Новая
       34

Прослушивание событий, вызванных отклонением данных в машинописи

0 голосов
/ 21 июня 2019

Я пытаюсь прослушать событие отклонения данных, когда модальный ng-bootstrap закрыт 

function(modal) {
        modal.element.on('hidden.bs.modal', function () {
          console.log('closed');
            modal.controller.closeModal();
        });
      }

Я также пытался 

$(".modal").on('hidden.bs.modal', function () {
          console.log('closed');
            modal.controller.closeModal();
        });

Но вскоре понял, что этоЭто JQuery и никогда не будет работать в машинописи.

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

<div class="modal fade" id="examples" tabindex="-1" role="dialog" id={{id}}>
  <div class="modal-dialog" role="document">
    <form class="modal-content" #form="ngForm" novalidate (ngSubmit)="searchFiles(yearSelector.value)">
      <div class="modal-header">
        <h5 class="modal-title">{{title}}</h5>
        <button type="button" class="close" data-dismiss="modal" (click)="reset();" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body form row">
        <div class="form-group col-sm-12">
          <label class="labelModal">Ingresar año de consulta:</label>
          <input type="telephone" class="form-control letter" (keypress)="keyPress($event)" [(ngModel)]="currentYear" name="yearSelector"
            maxlength="4" minlength="4" #yearSelector="ngModel" required pattern="^20[0-9]{2}$">
        </div>
        <div class="col-sm-12 form-group" *ngIf="yearSelector.errors && (yearSelector.dirty || yearSelector.touched)">
          <div *ngIf="yearSelector.errors.required" class="alert alert-danger">El año es requerido</div>
          <div *ngIf="yearSelector.errors.pattern" class="alert alert-danger">Debe ingresar un año válido de cuatro dígitos</div>
        </div>
        <div class="form-group col-sm-12">
          <label class="labelModal">Información</label>
          <div *ngIf="yearSelector.touched && files.length === 0">
            * No hay documentos existentes
          </div>
          <button class="list-group-item" *ngFor="let item of files" (click)="showFile(item)">
            <i class="fa fa-file-pdf-o" aria-hidden="true"></i> {{item.name}}
          </button>
        </div>
      </div>

      <div class="modal-footer" >
        <button type="button" class="btn colorJcem" (click)="reset();" data-dismiss="modal">Cancelar</button>
        <button type="button" class="btn colorJcem" id="buttonAnoRequest" (click)="searchFiles(yearSelector.value)" [disabled]="!form.form.valid">
          Buscar
        </button>
      </div>
    </form>
  </div>
</div>

Любая помощь всегда очень ценится!

1 Ответ

0 голосов
/ 30 июня 2019

Модальное демо дает хороший пример того, как реагировать на модальное закрытие.Когда вы звоните NgbModal.open, вы получаете экземпляр NgbModalRef со свойством result: Promise<any>.Вам просто нужно подписаться на этот результат.

...