⚠️ This lesson is retired and might contain outdated information.

Understand the Angular 2 States of Inputs: Pristine and Untouched

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 9 months ago

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.

egghead
egghead

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today