Angular 2 - 只接受自然数输入

Question

我有一个商店组件，我需要禁止人们在我的输入中选择负数。

例如，如果用户在我的输入中键入 -3，输入值将立即更改为 0.

我如何控制我的 angular 2 输入 OnChange 值以将其设置回 0 如果该值为负？

尝试使用 (ngModelChange)="myMethod($event)" 并在参数为负时将参数设置为 0，但没有成功。

Answer 1

使用min和step来防止微调器变为负值。（参考：this SO answer）
使用 ngModelChange 来处理用户试图输入负数的情况。

@Component({
  selector: 'my-app',
  template: `{{title}}
    <p><input type="number" min="0" step="1" [ngModel]="model"
        (ngModelChange)="validate($event)">`,
})
export class AppComponent {
  title = `Angular - RC.1`;
  model = 3;
  validate(value)  {
    value < 0 ? this.model = 0 : this.model = value;
  }
}

Plunker

Answer 2

使用模块 ng2-validation 中的 min 和 digits 验证器可以解决问题。

Angular 2 - 只接受自然数输入

Angular 2 - accept only natural number in input

angular2-forms

angular