Angular 9 Tutorial: Part 17 - NgModel and Two-Way Binding
seen from United States
seen from Türkiye
seen from China
seen from Algeria
seen from China
seen from China

seen from United States
seen from United States
seen from Germany

seen from Germany
seen from China
seen from United States

seen from United Kingdom
seen from China
seen from Japan
seen from United Arab Emirates

seen from Singapore

seen from United States
seen from Denmark
seen from United Arab Emirates
Angular 9 Tutorial: Part 17 - NgModel and Two-Way Binding
REGISTER NOW! New batch starting from 3rd June & 4th June 2017 #angularjs #framework #apps #frontend #ngmodel #koramangala #bangalore Visit: http://buff.ly/2rH9OFt
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!