angular - Angular 4 - 限制特定范围的用户输入

Question

我想要一个简单的数字输入组件，它只允许特定范围内的数字。

我使用在用户使用输入“箭头”时有效的 HTML 最小/最大属性

<input type="number" style="width: 100px" [(ngModel)]="value" min="0" max="99" />

在将其进一步传播到应用程序时，我也在检查这些值：

export class AppInput {
  _v: number;

  @Input()
  get value(): number {
    return this._v;
  }
  set value(v) {
    if (v > 99) {
      v = 99;
    }
    this._v = v;
    this.valueChange.emit(v);
  }
  @Output() valueChange = new EventEmitter<number>();
}

当用户直接写入输入时，例如当他按下0值时10- 输入正确更改为99。但是，当他继续时，输入内容更改为990（即使模型正确为 99）。

如何限制用户可以在输入组件中输入的内容？

示例项目：https ://codesandbox.io/s/w23900kx05

标签： angularforms

Answer 1

我不知道错误在哪里，但这应该可以。

   <input type="number" style="width: 100px" [(ngModel)]="value" oninput="this.value = this.value > 99?99:this.value" min="0" max="99" />

如果99不固定

<input type="number" style="width: 100px" 
  [(ngModel)]="value" 
 (keypress)='inputChanged()'
  min="0" max="99" />

在您的 .ts 文件中

 export class AppInput {
      maxNumber = 50 // u want to only change this;
      maxNumberBackup = this.maxNumber;

      _v: number;

    constructor(){
      this.maxNumber = this.maxNumber -1;
    }
      inputChanged() {
        return this.value > this.maxNumber ? false : true;
      }

      @Input()
      get value(): number {
        return this._v;
      }
      set value(v) {
        if (v > this.maxNumberBackup) {
          v = this.maxNumberBackup;
        }
        this._v = v;
        this.valueChange.emit(v);
      }
      @Output() valueChange = new EventEmitter<number>();
    }