时间戳

首页 > 解决方案 > Keyup 事件不会触发以显示错误消息和禁用按钮

angular - Keyup 事件不会触发以显示错误消息和禁用按钮

问题描述

我有一个屏幕表单，我需要在该表单上实时评估用户输入，以确保pageName他们输入的内容不存在于navbarMenuOptions数组中。如果是这样，我想切换displayNameand的阶段displaySaveButton。但是，我看到一个奇怪的错误，其中 keyup 事件没有触发。如何解决？

打字稿 

pageName: string;
displayError: boolean = false;
disableSaveButton: boolean = false;
navbarMenuOptions = ['Home', 'About', 'Features', 'Contact'];

validatePageName() {
    if (!this.pageName) {
      this.displayError = false;
      this.disableSaveButton = true;
    } else {
      for(let i = 0; i < this.navbarMenuOptions.length; i++) {
        if(this.pageName.toLowerCase() === this.navbarMenuOptions[i].toLowerCase()) {
          this.displayError = true;
          this.disableSaveButton = true;
        } else {
          this.displayError = false;
          this.disableSaveButton = false;
        }
      }
    }
  }

HTML

<div class="modal-body">
  <div class="alert alert-danger" role="alert" *ngIf="displayError">
    A page with this name already exists.
  </div>
  Please enter a name for your new page.
  <div class="form-group">
    <label for="pageName"></label><input class="form-control" id="pageName" type="text" [(ngModel)]="pageName" (keyup)="validatePageName()">
  </div>
</div>
<div class="modal-footer">
  <button class="btn btn-secondary" type="button" [disabled]="disableSaveButton">Save</button>&nbsp;
    <button (click)="onCloseButtonClick()" class="btn btn-secondary" type="button">Cancel</button>
</div>

标签： angular

解决方案

尝试使用以下代码（此处为 stackblitz 示例）：

validatePageName() {
    if (!this.pageName || this.pageName.trim() == '') {
      this.displayError = false;
      this.disableSaveButton = true;
    } else {
      for(let i = 0; i < this.navbarMenuOptions.length; i++) {
        if(this.pageName.toLowerCase() === this.navbarMenuOptions[i].toLowerCase()) {
          this.displayError = true;
          this.disableSaveButton = true;
          break;
        } else {
          this.displayError = false;
          this.disableSaveButton = false;
        }
      }
    }
  }
}

我猜你正在添加类似空格的东西，并期望它会被禁用。

我还添加了一个中断以使您的错误消息正常工作，否则 for 循环将无法正常工作。

推荐阅读