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

Question

It is possible for an element within an Angular form to enter into the dirty state without yet being touched? I have some code in my template that, depending on the answer to this question, may be redundant.

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

This *ngIf in this div, for instance, could be simplified to fName.invalid && fName.touched if there's no such thing as a dirty, untouched form control.

afaik, no! However, it depends on when you want to show the error message — Chau Tran, Jan 22 '18 at 19:53
yes, markAsDirty() https://angular.io/api/forms/AbstractControl#markAsDirty — Eliseo, Jan 22 '18 at 20:18

score 19 · Accepted Answer · answered Jan 22 '18 at 21:44

Yes.

By default Angular checks the dirty state on changes. So as the user types, the value is changed and the dirty state is set to true.

The touched state is not changed until the user leaves the field. It's like an "on lost focus" event. So as the user types, the dirty state is true but the touched state will be false. When the user leaves the field, both the dirty state and touched state will be true.

So if you want an error message to appear/disappear as the user is typing OR if the user just tabs/moves through the field, you will want to check both.

score 0 · Answer 2 · edited Mar 10 '20 at 09:31

0

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

With this condition, the message is displayed when the form is submitted (and invalid) or when the field is touched.

edited Mar 10 '20 at 09:31

Tim

5,435
7
42
62

answered Jan 22 '18 at 21:29

H.JA

1

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

2 Answers2