#ngmodel

[djvillain]

Angular 9 Tutorial: Part 17 - NgModel and Two-Way Binding

[zenraystechnologies]

View this post on Instagram

REGISTER NOW! New batch starting from 3rd June & 4th June 2017 #angularjs #framework #apps #frontend #ngmodel #koramangala #bangalore Visit: http://buff.ly/2rH9OFt

[borislit]

[peatyonrails]

AngularJS, < v1.3: Stop form validation errors from showing before the user has moved away from the field

I saw Google's Matias Niemelä demonstrate ngModelOptions the other day,  which does some nice things on models.  However this is a v1.3 feature, which hasn't landed in production yet; they're still figuring out the API.

I wanted to stop validations from triggering error messages before I'm done typing in a field.  You know the kind, right?  You type the first letter of your screenname or email and the validator yells at you: "TYPE MORE LETTERS!! INVALID EMAIL!!" while you're in the middle of typing.  So annoying.

I didn't find any good solution, except ones where people used both ng-blur and ng-focus to keep track of multiple statii.  I've come up with a more simple solution.

Add this ng-blur parameter to your input tag:

ng-blur="<formName>.<fieldName>.touched = true"

And on your validation ng-show, add:

&& <formName>.<fieldName>.touched

So you end up with something like

<input type="text" name="uScreenname" ng-model="user.screenname" ng-minlength="4" ng-blur="registerForm.uScreenname.touched = true" /> <div ng-show="registerForm.uScreenname.$error.minlength && registerForm.uScreenname.touched">   <span>Your screen name requires 4 characters</span> </div>

When you type in the form field, the validation doesn't show up because .touched doesn't exist yet.  Once you tab or touch away from the field though, ng-blur creates .touched, and if there are errors on the field, they will get shown. This data is just kept in the form data, not in the model itself so it doesn't get submitted. So it ends up being a pretty simple solution to an annoying Angular "feature". Hopefully Google will make it even easier to resolve with ngModelOptions!