验证 Angular 5 输入字段答案

【问题标题】：Validating angular 5 input field验证 Angular 5 输入字段
【发布时间】：2018-09-21 03:03:40
【问题描述】：

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

我需要验证数字类型的输入字段，使其最小值应为 1.1，最大值应为 8.1，并且只允许 1 个十进制值。我正在使用模板驱动的表单，但用户仍然能够输入大于 8.1、小于 1.1 的值，并且他能够输入多个小数位（我也需要帮助验证这个逻辑）。如果任何逻辑失败，我的要求是不要让用户能够单击保存按钮。

为了只允许小数点后的一个值，我尝试使用 maxlength 但它不起作用。

我尝试使用以下逻辑：

组件.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>

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

【问题讨论】：

使用 ng-pattern 并添加正则表达式进行验证
我认为它可能会起作用。我会检查它。您能否也从您的最后检查它是否有效？
@PramodPatil : ng-pattern 不适用于 angular 5。可能它会在 angularjs 中使用。不过感谢您的指点，它指引我找到了正确的解决方案:)

标签： typescript angular5

【解决方案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>

希望其他寻求这种实现的用户也能做到这一点

【讨论】：