时间戳

首页 > 解决方案 > Angular 反应式表单输入验证在负载上不起作用

angular - Angular 反应式表单输入验证在负载上不起作用

问题描述

我对反应式表单验证有点陌生，试图在页面加载时实现输入验证，我有一个简单的输入字段，我需要在页面加载时验证，而不是手动验证。要求是我有一堆输入字段的编辑表单，我正在寻找每个字段的 maxLength 验证。我尝试在 patchValue/setValue 上使用 updateValueAndValidity 但错误不会出现，非常感谢任何帮助。

注意：我需要在页面加载时显示错误

堆栈闪电战

标签： angularangular-reactive-forms

解决方案

您的 StackBlitz 示例几乎是正确的。在表单中设置数据后，您不需要调用任何额外的方法，例如.updateValueAndValidity()，您只是在错误地检查错误状态：

<span *ngIf="sampleForm.get('inputTxt').hasError(maxLength)">
  Max(10) letters reached!!!
</span>

应该：

<span *ngIf="sampleForm.get('inputTxt').hasError('maxlength')">
  Max(10) letters reached!!!
</span>

有关工作示例，请参阅此更新的 StackBlitz：https ://stackblitz.com/edit/angular-2fvyqj

推荐阅读