Create a Basic Angular 2 ngModel Input

Check ngModel Validation in Angular 2

Display Validation and Error Messaging in Angular 2

Create and Submit an Angular 2 Form using ngForm

Group Inputs in Angular 2 Forms with ngModelGroup

Style Validation in Angular 2 Forms

Understand the Angular 2 States of Inputs: Pristine and Untouched

Use RxJS Streams with Angular 2 Forms

Create Radio Buttons for Angular 2 Forms

Build Select Dropdowns for Angular 2 Forms

Learn the Basics of Angular Forms

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.

Course

Learn the Basics of Angular Forms

Understand the Angular 2 States of Inputs: Pristine and Untouched

Share this video with your friends