Hello, I'm currently working on an AngularJS application where I'm implementing email validation. I'm facing an issue where I expect an error message to appear when I enter 'test@test', but it's not working as intended.
Here is the code snippet:
<div class="inputblock with-icon mail" ng-class="{ 'has-error' : ((form.$submitted && form.email.$invalid)|| (form.email.$invalid && form.email.$dirty))}">
<label class="inputblock-label" ng-show="user.email">{{ 'Email' | translate }}</label>
<span class="input-icon"><img src="images/mail-icon.png"></span>
<div>
<span class="ang-error" style="color:#fff" ng-show="form.email.$dirty && form.email.$invalid">
<span ng-show="form.email.$error.required && form.email.$dirty">* {{'Required' | translate}}</span>
<span style="color:#fff" ng-show="form.email.$error.email">{{'Invalid EmailId' | translate}}</span>
</span>
</div>
<input type="email"
class="with-icon"
ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/"
placeholder="{{ 'Email' | translate }}"
ng-model="user.email"
required=""
name="email"
my-maxlength="50">
</div>
Upon entering 'test@test', the following code is displayed in the browser:
<input type="email" class="with-icon ng-dirty ng-valid-required ng-invalid ng-invalid-pattern ng-valid-email ng-touched" ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" placeholder="Email" ng-model="user.email" required="" name="email" my-maxlength="50" ng-trim="True">
Here is a screenshot of the field after entering 'test@test': https://i.sstatic.net/iHev3.png
And here is a screenshot after entering 'test@': https://i.sstatic.net/u4sWt.png
Any suggestions on how to resolve this issue would be greatly appreciated. Thank you.