如何在 angular 2 material 中设置最小最大用户输入？

Question

HTML:

<div class="col-md-2">
 <mat-form-field class="Custom">
 <input matInput placeholder="Enter Custom Value" [(ngModel)]="Value" 
(keypress)="numberOnly($event)" min="0" max="10">
 </mat-form-field>
</div>

打字稿：

  numberOnly(event): boolean {
    const charCode = (event.which) ? event.which : event.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
      return false;
    }
    return true;

  }

如何在此处设置最小和最大用户输入？我已经完成了 link（自定义输入）：https://stackblitz.com/edit/angular-custom-number-input?file=src%2Fapp%2Fhello.component.ts

我正在尝试输入与此处相同的代码，但它不起作用。还有什么我可以放在这里吗？

Answer 1

您在这里不需要任何打字稿逻辑。只需将您的字段类型设为：

<input type="number" min="0" max="10" ...>

浏览器会为您处理输入。

Answer 2

1- 您需要在具有类型编号的输入标签中指定最小值和最大值，

<input type="number" min="0" max="10" ...>

2- 但你也需要限制输入。

2.a- 您可以添加表单验证。例如：

  this.heroForm = new FormGroup({
name: new FormControl(this.hero.name, [
  Validators.required,
  Validators.minLength(4),
  forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
]),
alterEgo: new FormControl(this.hero.alterEgo),
power: new FormControl(this.hero.power, Validators.required)

});

2.b- 如果新值无效，您可以使用键和鼠标事件 return 旧值（如果您正在动态编程并且您没有在ts)

如何在 angular 2 material 中设置最小最大用户输入？

How to set min max user input in angular 2 material?

typescript

angular

angular5