Understand the Angular 2 States of Inputs: Pristine and Untouched
Angular 2’s ngModel exposes more than just validity, it even gives you the states of whether the input has been “touched” or changed. This lesson explains and compares those states so you can use them to make complex validity requirements.
[00:00] You probably noticed when we inspected this input that there are also classes of untouched and pristine. While those are classes you could create styles for, they're also properties on the ngModel as well.
[00:15] If I were to check on the username ref.untouched, and just to visually call this out, we'll put some horizontal rules around it, you'll see that we now have true, that this is untouched.
[00:27] If I click inside of there, and then it loses focus, this has now become touched, meaning that you've touched it and gone out of it. If I refresh, that doesn't mean that I've changed something, so it's still true. It means that you've touched it and it's lost focus, so now it's false.
[00:45] The other one was pristine, so this was the one where if you changed something, that means that the field has changed to something else.
[00:55] This is no longer the same value it was when it started, or even if I try and change it back to the original value, it's not going to go back to true. Pristine means it's changed, or something has changed in there, touched as you've gone in there and lost focus.
[01:09] You have the opposite of each of these as well, so pristine and dirty. Then there's username touched and untouched. Let's move untouched on top, since that's the nothing has happened one, to match pristine, meaning nothing has happened.
[01:24] We'll hit save. You'll see true false, true false, and if I change something, false true, true false, because we changed something, so it's dirty. So it changed from dirty, and once I lose focus, this is now true.
[01:38] You can go ahead and use each of these values for very complex scenarios, depending on what your form needs.