Angular 2+ 中的元素可以在不被触摸的情况下变脏吗？

Question

Angular 形式中的元素是否可以进入 dirty 状态但尚未成为 touched？我的模板中有一些代码，根据对这个问题的回答，这些代码可能是多余的。

<input class="form-control" #fName="ngModel" required />
<div *ngIf="fName.invalid && (fName.dirty || fName.touched)" class="form-error">
    First name is required
</div>

例如，div 中的 *ngIf 可以简化为 fName.invalid && fName.touched，如果没有脏的、未触及的表单控件。

Answer 1

*ngIf="fName.invalid && fName.hasError('required')"

在这种情况下，当提交表单（无效）或触摸字段时显示消息。

Answer 2

是的。

默认情况下 Angular 检查更改时的脏状态。因此，当用户输入时，值会发生变化，并将脏状态设置为 true。

直到用户离开现场，触摸状态才会改变。这就像一个 "on lost focus" 事件。因此，当用户键入时，脏状态为真，但触摸状态为假。当用户离开场地时，dirty state 和 touched state 都为真。

因此，如果您希望在用户输入时向 appear/disappear 发送错误消息，或者如果用户只是 tabs/moves 通过该字段，则您需要检查两者。

Angular 2+ 中的元素可以在不被触摸的情况下变脏吗？

Can an element in Angular 2+ be dirty without being touched?

angular-validation

angular