Angular 6验证数字输入

Question

我有一个输入，类型是数字。我想设置最小值和最大值，如果输入超出这个范围(<最小值或>最大值)，就会显示错误。

我的问题是，如果输入不为空但无效，则错误消失(例如:min =10，max =20，input =2000，仍然没有错误显示)。

我在这个网站上搜索，有一篇关于验证的帖子，但解决方案是使用 和 。我不想使用 和 。

引用:here

有什么办法可以解决我的问题吗？

我的 add-hero.component.html:

<div class="publishedYear">
<label>Publish Year: </label>
<input type="number" id="PublishedYear" name="PublishedYear" required min="10" max="20" 
[(ngModel)]="hero.PublishedYear" #publishedYear="ngModel">
<p class="alert alert-danger invalid" *ngIf="publishedYear.errors">Invalid Published Year</p>
</div>

我的英雄.ts

export class Hero {
Id: number;
Name: string;
PublishedYear: number;
Complete?: boolean;
}

Answer 1

当您使用输入 type="number" 设置 min 和 max 时，您的解决方案将仅在用户使用滚动条增加或减少数字时停止允许用户。但是当用户直接在文本中输入数字时，它不会显示任何错误

要做到这一点，有两种解决方案

1) 使用 Angular 表单验证将表单控件添加到您的输入中将有几个在线示例

2) 在更改文本框或单击按钮时调用函数以验证用户输入的数字是否与您在 ts 文件中的表达式匹配。

使用你需要做的表单验证

myForm = new FormGroup({}) // Instantiating our form

constructor(private fb: FormBuilder){ // Injecting the ReactiveForms FormBuilder.
  this.myForm = fb.group({
    // Adding the "myNum" input to our FormGroup along with its min-max Validators.
    'myNum': ['', [Validators.min(5), Validators.max(10)]] 
  })
}

在 HTML 中

<form [formGroup]="myForm"> <!-- Binding myForm to the form in the template -->
    <label for="myNum">Some Val</label>
    <!-- formControlName binds our myNum field declared in the ts code. -->
    <input type='number' id="myNum" formControlName="myNum">
    <div *ngIf="myForm.controls['myNum'].hasError('max')">
          Minimum required number is 15.
    </div> 
</form>