Angular表单验证首次输入时错误消息不显示问题求助

问题原因 #

你的错误提示条件里依赖了title.touched，但Angular中touched状态只有在控件失去焦点后才会变为true。首次点击输入框输入内容时，控件处于dirty（已修改）状态，但touched仍为false，不满足条件所以错误消息不显示；当点击输入框外部（控件失去焦点），touched变为true，之后再输入就满足条件了。

解决方案 #

修改错误提示的*ngIf条件，改用dirty || touched组合判断，只要控件被修改过或者被触摸过，且验证不通过就显示错误：

修改后的HTML代码：

<form [formGroup]="form" (ngSubmit)="submit()">
    <input class='border w-full py-2 px-4 mb-2' type="text" placeholder="product name" formControlName="title"/><br />
    <button [disabled]="title.invalid" class="py-2 px-4 bg-blue-500 hover:bg-blue-700 text-white font-bold rounded" type='submit'>
        Add Product
    </button>
</form>

<p *ngIf="title.errors?.required && (title.dirty || title.touched)" class="text-red-600 font-medium mx-2">
    不能为空
</p>
<p *ngIf="title.errors?.['minlength'] && (title.dirty || title.touched)" class="text-red-600 font-medium mx-2">
    长度过短，当前{{title.value.length}}个字符（最少3个）
</p>

另外，按钮的禁用条件也优化为title.invalid，这是Angular表单提供的标准状态标识，比直接判断title.errors更准确。

状态说明 #

• dirty：控件值被用户修改过
• touched：控件被点击过并失去焦点
• invalid：控件未通过验证规则

修改后，首次输入不符合规则的内容时，dirty会立即变为true，错误提示会实时显示。

内容的提问来源于stack exchange，提问作者Eugene