Угловая: шаблонная проверка поля формы в модальном диалоговом окне ngBootstrap - PullRequest
0 голосов
/ 06 декабря 2018

У меня есть проверка формы на основе шаблона внутри диалога ngBootstrap, например:

<ng-template #content let-modal>
  <div class="modal-header">
     ...
  </div>
  <div class="modal-body">
    <form>
      <label for="newplaylistname">Name:</label>
      <input #validate="ngModel" name="newplaylistname" id="newplaylistname" pattern="^[A-Za-z0-9\s-_]+$" ngbAutofocus (keydown.enter)="$event.preventDefault();modal.close();" type="text" [(ngModel)]="newplaylistname"/><br/>
        <!-- Validator Message -->
        <div *ngIf="validate.invalid && (validate.dirty || validate.touched)"
            class="alert alert-danger">

          <div *ngIf="validate.errors.pattern">
            Der Name darf nur Buchstaben, Ziffern und Leerzeichen sowie _ und - enthalten.
          </div>

        </div>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" (click)="modal.dismiss()">Abbrechen</button>
    <button type="button" class="btn btn-primary" (click)="modal.close()" [disabled]="validate.invalid">Anlegen</button>
  </div>
</ng-template>

Он работает (почти) идеально.НО, как вы видите, я использую обработчик событий (keydown.enter) для элемента ввода.И он по-прежнему будет вызывать метод закрытия модального диалога, даже если содержимое текстового поля может быть недействительным.

Я безуспешно пытался выполнить следующее:

  1. (keydown.enter)="if(!validate.invalid) modal.close();".Выдает ошибку «Неверный токен если».Очевидно, что вы не можете использовать условия условия в этих строках обработчика событий
  2. В коде, который вызывается при закрытии модального диалога, я попытался использовать ViewChild / ElementRef, чтобы получить элемент и проверить его состояние проверки:

.

 @ViewChild("validate") validateRef: ElementRef;
 ...
 if(!this.validateRef.nativeElement.invalid)
 // or if(!this.validateRef.invalid)
 // both give undefined already for this.validateRef

Что я могу сделать, чтобы предотвратить запуск keydown.enter ИЛИ проверить состояние проверки поля внутри моего кода?

1 Ответ

0 голосов
/ 06 декабря 2018

Вы пробовали троичного оператора?

(keydown.enter)="!validate.invalid ? modal.close() : whatever you want in case of false condition"
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...