I am beginner of angularjs. I just started on form validation. All is went right until i tried to hide the error message on input focus.
When i am hitting submit button it shows error message. After i focus on textbox it has to hide the error message
And this is my code:
<form name="form" novalidate>
<div>
<label>Username</label>
<input type="text" name="username" ng-model="username" ng-required="true" ng-minlength="5" ng-maxlength="7"/>
<span class="errors" ng-show="(form.$submitted || form.username.$touched) && form.username.$error.required">Please fill username</span>
<span class="errors" ng-show="form.username.$error.minlength">Username too short</span>
<span class="errors" ng-show="form.username.$error.maxlength">Username too long</span>
</div>
</form>
Please someone help me
this is just a trick, try if this works :
<form name="form" novalidate>
<div>
<label>Username</label>
<input type="text" name="username" ng-model="username" ng-required="true" ng-minlength="5" ng-maxlength="7" ng-focus="focused=true"/>
<span class="errors" ng-show="(form.$submitted || form.username.$touched) && form.username.$error.required && !focused">Please fill username</span>
<span class="errors" ng-show="form.username.$error.minlength && !focused">Username too short</span>
<span class="errors" ng-show="form.username.$error.maxlength && !focused">Username too long</span>
</div>
</form>
NB : on clicking submit, make focused = false;