Angular：ngBootstrap 模态对话框中的模板驱动表单字段验证

Question

我在 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 触发或检查代码中字段的验证状态？

Answer 1

你试过三元运算符吗？

(keydown.enter)="!validate.invalid ? modal.close() : whatever you want in case of false condition"

Angular：ngBootstrap 模态对话框中的模板驱动表单字段验证

Angular: Template driven form field validation in ngBootstrap modal dialog

angular

ng-bootstrap

angular-validation