Question

我有这个输入的 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 个字符，则会显示错误并且表单无效。

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

Answer 1

显示验证/错误消息

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

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

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

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

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

<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 以查看实施。

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

1 个答案: