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>

例如，如果不存在脏的，未触及的表单控件，则此*ngIf中的div可以简化为fName.invalid && fName.touched。

Answer 1

是。

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

在用户离开现场之前，触摸状态不会改变。这就像是一个“失去焦点”的事件。因此，当用户键入时，脏状态为真，但触摸状态为假。当用户离开该字段时，脏状态和触摸状态都将为真。

因此，如果您希望在用户键入时显示/消失错误消息，或者如果用户只是选中/移动字段，则您需要同时检查两者。

Answer 2

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

使用此条件时，表单提交（和无效）或触摸字段时会显示消息。