Question

What is the best practices for showing the validation errors only after the user clisks some button? The $.pristine and $.dirty are reflected immediately so doing something like this does not work…

<input name="email" id="email" type="email" required ng-model="user.email" placeholder="email">

<div ng-show="form.$dirty && form.email.$invalid">
    <span class="error" ng-show="form.email.$error.required">Required!</span>
    <span class="error" ng-show="form.email.$error.email">This is not a valid email.</span>
</div>

I suppose I could write some directive that could do this, but was just wondering if there was an easier way.

Answer 1

I’d make a custom variable called $scope.showErrors and when the user performs the action (like presses the button) then set $scope.showErrors to false. Then, your outer div would check for showErrors as an ng-show in addition to the other checks you’re doing.