This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Understand the Angular 2 States of Inputs: Pristine and Untouched

    John LindquistJohn Lindquist

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss