angular2 输入 ngModel 限制可能的值答案

【问题标题】：angular2 input ngModel limiting possible valuesangular2 输入 ngModel 限制可能的值
【发布时间】：2016-04-25 21:49:53
【问题描述】：

ngModel 似乎有一个奇怪的问题。当您在此处查看示例时：Plnkr

您会看到，当我尝试将可能的值限制在 1 到 5 之间时，当输入高于 5 的值时，重置输入总是可以正常工作。重置为 1 几乎同样有效，但当输入为 1 或无。然后 ngModel 行为正确，但输入未正确更新。

组件类

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
       ...
       <input type="text"
              [(ngModel)]="testValue"
              onClick="this.select();"
              onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
    </div>
  `,
  directives: []
})
export class App {
  private changeValueTimeout;

  private _testValue:number = 0;
  private _testValueMax:number = 5;

  get testValue() {
    return this._testValue + 1;
  }
  set testValue(value: string) {
    clearTimeout(this.changeValueTimeout);
    var me = this;

    this.changeValueTimeout = setTimeout(() => {
      var numValue:number = Number.parseInt(value);
      if (numValue > me._testValueMax - 1){
        numValue = me._testValueMax;
      } else if (numValue < 1 || isNaN(numValue)){
        numValue = 1;
      }
      me._testValue = numValue - 1;
    }, 1000);
  }

  constructor() {}
}

这是一个特定于 HTML 的问题吗？ angular2 有问题吗？

【问题讨论】：

这可能也适用于您的用例stackoverflow.com/a/37561412/217408

标签： html angular

【解决方案1】：

如果您打开示例的源代码，您将在输入时看到：

onkeypress="return event.charCode >= 48 && event.charCode <= 57"

如果您删除它，您将能够添加任何字符，如果没有，您的字符代码必须在 48 到 57 之间。

【讨论】：

这不是描述的问题。从 1 到 5 的限制仅用于演示目的，也可能是从 1 到 615。

【解决方案2】：

这种混淆是双向数据绑定在 Angular 2 中不是默认设置的部分原因。你无法分辨谁在更新变量。

我不会在 ngModel 中使用 getter/setter。您可以将 ngModel 拆分为可在模板中使用的属性和事件处理程序。

[ngModel]="testValue"
(ngModelChange)="checkRange($event)"

那么你就不需要使用私有变量或getter函数了

【讨论】：