Angular FormControl dirty vs touched
Asked on October 18, 2023
What is difference between dirty and touched in FormControl?
Replied on October 18, 2023
AbstractControl is the base class for FormControl, FormGroup, and FormArray. Hence all the elements of AbstractControl is available in FormControl. The dirty and touched is the boolean property of AbstractControl and is available in FormControl, too.
dirty
A control is dirty if the user has changed the value in the UI.
touched
A control is marked touched once the user has triggered a blur event on it.
username = new FormControl();
<input [formControl]="username">
a. On blue event:
console.log(username.touched) // true
console.log(username.dirty) // false
b. On value change:
console.log(username.touched) // true
console.log(username.dirty) // true
1. So the difference is if a FormControl has triggered a blur event, FormControl will be called as touched but not dirty.
2. Once we change the value, control will be called as dirty. Even if we enter value and then delete, control will be dirty.
3. A dirty control is always considered to be touched. It means if dirty = true then touched = true.
4. If touched = true, it is not necessary that dirty will be true.
