反应式表单 MinLength 验证未显示错误答案

【问题标题】：Reactive Forms MinLength Validation Is Not Showing Error反应式表单 MinLength 验证未显示错误
【发布时间】：2019-06-19 10:45:40
【问题描述】：

我在我的 Angular 应用程序中使用 ReactiveForms。我希望用户输入的数字少于 7 个，所以应该在那里显示错误消息，但不幸的是，如果有任何错误或解决方案，它就不起作用，所以请提供给我。谢谢

服务.ts

PhoneNo: ['', [Validators.required, Validators.minLength(7)]],

html

<input class="full-width has-padding has-border" formControlName="PhoneNo" type="tel" placeholder="Mobile *" />
        <img src="../../../../assets/img/required-img.png" class="required-img"
          *ngIf="service.formModel.get('PhoneNo').touched && service.formModel.get('PhoneNo').errors?.required"
          title="This fields is mandatory" data-toggle="tooltip" />
          <label *ngIf="service.formModel.get('PhoneNo').touched && service.formModel.get('PhoneNo').errors?.minLength">Minimum 7 characters required</label>

【问题讨论】：

可能不是问题的原因，但也应该清理一下：您正在混淆模板和反应式表单验证。输入上有一个值为“7”的 maxLength 属性，您有一个值为“7”的 minLength 验证器并打印一条错误消息，指出至少需要 9 个字符...
分享更多代码
@MarkusS。 .是的，标签文本有错误，但它不应该影响我的代码。而且当我删除 maxLenth 时它也不起作用。
@ShahidIslam 你想看哪一部分？
服务中的表单模型声明..

标签： angular typescript angular-reactive-forms

【解决方案1】：

这在 Angular 方面具有很大的误导性。在组件内部，您可以通过以下方式设置验证器：

[Validators.minLength(2)]

然后，您会期望以下工作：

errors?.minLength

无论出于何种原因，他们决定在模板中使用以下格式的错误消息：

errors?.minlength

你唯一需要做的就是用 l 替换 L

【讨论】：

【解决方案2】：

至少需要 9 个字符

用户错误键为 minlength 而不是 minLength

【讨论】：

【解决方案3】：

添加 maxLength 验证器，这会将输入字符限制为 7 个字符?

PhoneNo: ['', [Validators.required, Validators.maxLength(7) , Validators.minLength(7)]],

demo ??

【讨论】：

但我希望用户不能输入少于 7 个数字。
在这种情况下你可以同时添加最小值和最大值?，我已经更新了答案@WebMaster
@WebMaster 我有一个活生生的例子

【解决方案4】：

您的 html 中有 maxLength 作为属性。你应该删除它

代替

<input class="full-width has-padding has-border" formControlName="PhoneNo" type="tel" placeholder="Mobile *" maxlength="7" />

这样做

<input class="full-width has-padding has-border" formControlName="PhoneNo" type="tel" placeholder="Mobile *">

另外，<input> 和 <img> 不应在末尾有封闭标签 <img/> 应该是 <img>

您可以为它创建一个正则表达式，而不是一起使用 minLength 和 maxLength

PhoneNo: ['', [Validators.required, Validators.pattern(^[\s\S]{7}$)]],

还要记住使用service.formModel.get('PhoneNo').errors?.pattern 而不是.errors?.minLength 以显示标签。

编辑 @malbarmawi 很乐意在这里做一个演示：https://stackblitz.com/edit/angular-forms-pattern-bernj2。他自己也有另一种方法来解决同样的问题。

【讨论】：

@WebMaster 你检查我的答案了吗？？
您是否添加了Validators.pattern(^[\s\S]{7}$) 而不是 maxLength？
是的，但它显示错误。 "The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type."
@John 我已经测试了你的解决方案它正在工作，所以我们的答案都是正确的?
算术运算相关的错误一定是别的。感谢 @malbarmawi 的演示。

【解决方案5】：

它不工作的原因 - 你应该用小写写maxlength，不是驼峰式。 minlength也一样

【讨论】：