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)事件处理程序。即使文本框内容可能无效，它仍然会触发模式对话框的close方法。

我尝试了以下操作但未成功：

(keydown.enter)="if(!validate.invalid) modal.close();"。它给出一个错误“如果无效令牌”。显然，您无法使用这些事件处理程序字符串中的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模态对话框中的模板驱动表单字段验证

1 个答案: