带有输入的Angular 2分页控件 - 验证

Question

我有一个分页组件。

html: 第一页

    <button md-mini-fab (click)="previous()" [disabled]="isFirstpageButtonDisabled" style="margin:0 0.5rem">
        <md-icon>chevron_left</md-icon>
    </button>
    <input #input type="text" (keyup.enter)="goToPage(input.value)" [(value)]="pageIndex" style="margin:0 0.5rem; width: 40px;">
    / {{totalPages}}
    <button md-mini-fab (click)="next()" [disabled]="isLastpageButtonDisabled" style="margin:0 0.5rem">
        <md-icon>chevron_right</md-icon>
    </button>

    <button md-mini-fab (click)="goToPage(totalPages)" [disabled]="isLastpageButtonDisabled" style="margin:0 0.5rem">
        <md-icon>last_page</md-icon>
    </button>

当用户在输入框中输入无效的数字/字符时，我会显示一条错误消息。我还需要将输入框值恢复为之前有效的数字。

checkPageIndex() {
    this.validpageIndex = true;    

    if (this.pageIndex < 1 || this.pageIndex > this.totalPages || isNaN(this.pageIndex)) {
        this.validpageIndex = false;
        this.toaster.showToaster('Please select a page between 1 and ' + this.totalPages + '.');
        return;
    }
}

我试图通过保存前一页索引并在有效检查失败时分配该值来实现这一点：

this.pageIndex = this.previousPageIndex;

此值已在控制台日志中正确分配，但输入文本框仍显示无效输入。我怎样才能解决这个问题？

Answer 1

您走在正确的轨道上，只需几件事就能让您到达那里。基本上，您希望在更改当前 pageIndex 时随时跟踪 lastPageIndex，然后在检查失败时将当前 pageIndex 设置为 lastPageIndex 中的值。将输入更改为 ngModel 并为文本字段添加一个 on blur 事件以在他们离开时捕获他们的更改也不会受到伤害。如果您的用户可能会尝试将输入更改为其他无效的内容，您可以添加对这些内容的检查，甚至使用 ngOnChanges() 来监控输入以确保。更新后的 goToPage 函数示例可能如下所示

 goToPage(page: number) {
    // check to make sure number is valid
    if(this.pageIndex <= 1 || this.pageIndex >= this.pages.length || isNaN(this.pageIndex)) {
      alert("invalid page selected");
      this.pageIndex = this.lastPageIndex;
    }
    else {
      // update current page and save last index
      this.pageIndex = page;
      this.lastPageIndex = this.pageIndex;
    }
  }

这是一个简化的 plunker，其中包含您的问题的工作示例http://plnkr.co/edit/EFBiVz4gy4nl4mFDe6x1?p=preview