Question

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左右有问题吗？

Answer 1

如果您打开示例的源代码，您将在输入中看到此内容：

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

如果你删除了你可以添加任何字符，如果没有，你的字符代码必须在48到57之间。

Answer 2

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

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

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

然后您不需要使用私有变量或getter函数

angular2输入ngModel限制可能的值

组件类

2 个答案: