У меня есть проверка формы на основе шаблона внутри диалога 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)
для элемента ввода.И он по-прежнему будет вызывать метод закрытия модального диалога, даже если содержимое текстового поля может быть недействительным.
Я безуспешно пытался выполнить следующее:
(keydown.enter)="if(!validate.invalid) modal.close();"
.Выдает ошибку «Неверный токен если».Очевидно, что вы не можете использовать условия условия в этих строках обработчика событий - В коде, который вызывается при закрытии модального диалога, я попытался использовать 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 ИЛИ проверить состояние проверки поля внутри моего кода?