如何在角度2材质中设置最小最大用户输入？

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>

TypeScript：

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

  }

如何在此处设置最小和最大用户输入？我已经通过以下链接（自定义输入）：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- 您需要在具有类型编号的输入标签中指定 min 和 max，

<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- 如果新值无效，您可以使用键和鼠标事件返回旧值（可用于动态编程并且未在 ts 中定义表单）