角度模板驱动的表单不执行最小验证答案

【问题标题】：Angular template driven form not performing min validation角度模板驱动的表单不执行最小验证
【发布时间】：2021-05-09 09:42:16
【问题描述】：

我有这个输入的 angular 11 模板驱动表单

<form #currentForm="ngForm">
<input matInput type="number" min="18" placeholder="Your age" name="age" [(ngModel)]="memberDetailForm.age">
</form>

{{ currentForm.controls.age?.errors | json }}
{{ currentForm.valid }}

这里的表单没有执行最小验证检查，即使我输入小于 18 的 15，我也看不到任何错误并且表单显示有效。但是，如果我将输入类型更改为文本并进行其他检查，例如 minLenth="5" 并输入 4 个字符，则会出现错误并且表单无效。

谁能帮我理解这种奇怪的行为？

【问题讨论】：

这能回答你的问题吗？ Min / Max Validator in Angular 2 Final
Nope angular.io/api/forms/Validators 实际上有来自角度 5 的最小和最大验证器。
请从 angular github 中查看此问题 [min, max (Template Driven form) angular failed to mark the FormControl as invalide][1] [1]: github.com/angular/angular/issues/30409
是的，没错。感谢您的链接。这是一个错误。

标签： angular

【解决方案1】：

显示验证/错误消息

我们需要向用户提供简短而有意义的错误消息。

Angular 为每个应用了ngModel 指令的字段创建一个FormControl。 FormControl 暴露了表单元素的状态，如有效、脏、触摸等。

您可以通过两种方式获得对FormControl 的引用。

一种方法是使用currentForm 变量。我们可以使用currentForm.controls.age.valid来判断age是否有效。

另一种方法是为每个FormControl创建一个新的局部变量例如，以下age="ngModel" 使用FormControl 实例创建age 变量。

<input type="text" id="age" name="age" required minlength="10" 
            #age="ngModel" [(ngModel)]="contact.age">

现在，我们有一个对age FormControl 实例的引用，我们可以检查它的状态。我们使用valid属性来检查age是否有错误。

valid：返回无效状态或 null 表示有效状态

<div *ngIf="!age?.valid && (age?.dirty || age?.touched)">
   Invalid Age Or Required
</div>

完整样品检查here。

要对数字应用最小/最大验证，您需要创建自定义验证器

检查此Answer 以查看实施。

更新：

Angular v12 现已推出，来自社区的支持

Angular 社区一直在努力通过为框架做出贡献来改善每个人的 Angular 体验——谢谢！

以下是由于您的出色工作而获得的一些 PR：

避免 ngZone 不必要地抛出与导航相关的警告 (#25839)
HttpClient 支持指定请求元数据(#25751)
min 和 max 添加表单验证器 (#39063)
支持APP_INITIALIZER 使用可观察对象 (#33222)

【讨论】：