Angular:ngBootstrap 模态对话框中的模板驱动表单字段验证
Angular: Template driven form field validation in ngBootstrap modal dialog
我在 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();"
。它给出了一个错误 "Invalid token if"。显然你不能在那些事件处理程序字符串中使用 if 条件
- 在模态对话框关闭时调用的代码中,我尝试使用 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 触发或检查代码中字段的验证状态?
你试过三元运算符吗?
(keydown.enter)="!validate.invalid ? modal.close() : whatever you want in case of false condition"
我在 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();"
。它给出了一个错误 "Invalid token if"。显然你不能在那些事件处理程序字符串中使用 if 条件- 在模态对话框关闭时调用的代码中,我尝试使用 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 触发或检查代码中字段的验证状态?
你试过三元运算符吗?
(keydown.enter)="!validate.invalid ? modal.close() : whatever you want in case of false condition"