角度表单验证"分钟"不起作用

Question

我正在阅读 https://angular.io/guide/forms。

我的代码：

<!-- Min price -->
<div class="form-group">
<label for="minprice">Min price</label>
<input type="number"
min="0"
class="form-control" id="minprice"
required
[(ngModel)]="model.minprice" name="minprice"
#minprice="ngModel">
<div [hidden]="minprice.valid"
class="alert alert-danger">
Min price is required
</div>
</div>
<!-- Max price -->
<div class="form-group">
<label for="maxprice">Min price</label>
<input type="number" class="form-control" id="maxprice"
required
min="0"
[(ngModel)]="model.maxprice" name="maxprice"
#maxprice="ngModel">
<div [hidden]="maxprice.valid"
class="alert alert-danger">
Max price is required
</div>
</div>

我有两个问题：

1，min="0"似乎不起作用。 当我输入-1时，没有显示错误消息。

2、如何验证minprice小于maxprice？

欢迎任何提示。谢谢

Answer 1

当您使用type="number"输入控件填充向上/向下箭头以递增/递减数值时，因此当您使用这些按钮更新文本框值时，它不会超过最大限制，但当您手动提供输入时，它不会验证最大限制，因此您必须通过代码对其进行验证。

如果我使用FormControlModule，我会这样做：

<input type="number" min="0" max="100" name="MyInput" [formControl]="myInput">

然后在我的组件类中：

this.myInput =  new FormControl("", [Validators.max(100), Validators.min(0)]) 

然后，如果您登录myInput您将在对象中看到一个错误键，然后您可以使用该键来显示和隐藏错误消息容器。

Answer 2

就我而言，我真正需要的不是Validators.min，而是Validators.minLength。

Answer 3

尝试重新启动VSCode。它可能无济于事，但可能会。

我有一些有线经验。

当我第一次尝试在我的 Angular 项目中使用Validators.min(1(来阻止数字字段低于 1 时，但它不起作用。

无论我做什么，Validators.min(1(都无法阻止数字字段低于 1！ 😲 如果我一直单击数字字段的向下箭头，数字将继续下降到负无穷大。

所以我尝试了Validators.pattern(/^[1-9]+[1-9]*$/(，数字停止低于 1。

然后我再次尝试了Validators.min(1(，这次这个数字没有低于 1。

我重新启动了VSCode，但数字仍然没有低于1。

那样很奇怪。 😲

Answer 4

检查最小值而不是最小长度。

// call additional check for value in html
<div [hidden]="minprice.valid && checkMinValue(minprice)"
class="alert alert-danger">
Min price is required
</div>
// component.ts file
checkMinValue(el: any): boolean {
console.log(el.model)
if (el.model >= el.valueAccessor._elementRef?.nativeElement?.min) {
return true;
} else {
return false;
}
}

检查工作示例堆栈闪电战演示