帶輸入的Angular 2分頁控制-驗證

Question

我有一個分頁組件。

html：first_page

    <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;
    }
  }

這是一個簡化的插件，其中包含您的問題的工作示例http://plnkr.co/edit/EFBiVz4gy4nl4mFDe6x1?p=preview