LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Just tab through these fields to see Behavior Differences:

If we're only concerned about whether the fields are $dirty, we can tab around in them without triggering any feedback:


Whereas if we instead key on $touched/ng-touched, we can tab around in them and immediately find out when we have validation problems:


Plus, here's an example of how to use Angular 1.3's ng-messages with your form, and how to suppress the messages (which appear by default whenever any errors are present) until you've $touched the respective control.

The First Name field is required
Your First Name is present, but too short
Your First Name is present, but too long
The Last Name field is required
Your Last Name is too short
Your Last Name is too long
CSS
p {
  color: #999;
}

.msg-block {
  margin-right: 145px;
}

#dirtyForm .ng-dirty.ng-invalid {
  background: red;
}
#dirtyForm .ng-dirty.ng-valid {
  background: chartreuse;
}

#touchedForm .ng-touched.ng-valid,
#touchedForm .ng-dirty.ng-valid {
  background: lightgreen;
}
#touchedForm .ng-touched.ng-invalid,
#touchedForm .ng-dirty.ng-invalid {
  background: darksalmon;
}

code {
  color: #777;
}
JS
angular.module("valDemo", ['ngMessages' ]).controller('formStuff', function($scope) {
  $scope.model = {
    test: 12345,
    
  }
})
Host Instantly Drag and Drop Website Builder

 

Description

Angular's validation features are excellent. But in Angular 1.3, we get a new option that gives us more granular control over when we provide validation feedback to our users: the ng-touched class/property.
Term
Mon, 11/27/2017 - 21:43

Related Codes

Pen ID
Pen ID
Pen ID