验证角度5输入字段

Question

更新：因此，我将输入更改为type =“ text”，并且maxlength可以正常工作，但是用户仍然可以输入负数，并且可以输入不在最小和最大范围内的数字。

我需要以数字方式验证输入字段的类型，使其最小值为1.1，最大值为8.1，并且仅允许使用十进制值。我使用的是模板驱动的表单，但是用户仍然可以输入一个大于8.1且小于1.1的值，并且他可以输入多个小数位（我也需要帮助验证此逻辑）。我的要求是，如果任何逻辑失败，则不允许用户单击“保存”按钮。

为了在十进制要求后仅允许一个值，我尝试使用maxlength，但是它不起作用。

我尝试使用以下逻辑：

Component.html

<input type="number" min= "1.1" max ="8.1" #c="ngModel" [ngModel]= "myvaluefromcomponent | number:'1.1-1'" (ngModel)="myvaluefromcomponet=$event" />

<button type="button" id="save" [disabled] ="c.errors"> Save </button>

这不能正常工作。请指出我要去哪里，并为该问题提出可行的解决方案。谢谢

Answer 1

我遇到了PatternValidator指令，它解决了我的问题。我可以通过这种方式在任何控件上使用指令：

<input type="number" min= "1.1" max ="8.1" #c="ngModel" [pattern]="myPattern" [ngModel]= "myvaluefromcomponent"/>

<button type="button" id="save" [disabled] ="c.errors?.pattern"> Save </button>

希望其他寻求这种实现的用户也能使用相同的作品