Angular 2 - 在输入中只接受自然数答案

【问题标题】：Angular 2 - accept only natural number in inputAngular 2 - 在输入中只接受自然数
【发布时间】：2016-05-18 16:32:23
【问题描述】：

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

例如，如果用户在我的输入中输入 -3，输入值将立即变为 0。

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

尝试使用(ngModelChange)="myMethod($event)"并将参数设置为0，如果它是负数，但没有奏效。

【问题讨论】：

标签： angular angular2-forms

【解决方案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

【讨论】：

谢谢，但是如果我正在循环一个项目列表，我怎么知道validate 方法我正在使用哪个模型？ [(ngModel)]="items[i].amount"
为什么点击上/下按钮会触发两次验证方法？
@TheUnreal，在方法调用中传递i：validate($event, i)，然后在方法中查找元素。
@tdhulster，好问题...我不知道为什么。如果您使用向上/向下箭头键，也会发生这种情况。
@tdhulster，可能它被触发了两次，因为你没有处于生产模式......（“Angular 正在开发模式下运行。调用 enableProdMode() 来启用生产模式。”将是显示在控制台中）

【解决方案2】：

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

【讨论】：