#ngmodel

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>