在无效电子邮件中显示ng-message而不在角度材质中使用ng-pattern

时间:2017-02-09 14:23:40

标签: html angularjs angular-material

我想在无效的电子邮件条目上显示错误消息Please enter valid email.,但不使用ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/"

<md-input-container class="md-block" flex-gt-xs>
    <label>Email</label>
    <input ng-model="user.Email" type="email" name="Email" md-maxlength="150" required ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/">
    <div ng-messages="userForm.Email.$error">
        <div ng-message="required" class="my-message">Please enter email.</div>
        <div ng-message="pattern" class="my-message">Please enter valid email.</div>
        <div ng-message="md-maxlength" class="my-message">Plase enter less than 150 characters in email.</div>
    </div>
</md-input-container>

1 个答案:

答案 0 :(得分:2)

in the email input example of the angular documentation所示,email属性在错误对象上设置,用于无效的电子邮件地址。因此,您可以将代码更改为:

<input ng-model="user.Email" type="email" name="Email" md-maxlength="150" required>
<div ng-messages="userForm.Email.$error">
    <!-- all your other messages... -->
    <div ng-message="email" class="my-message">Please enter valid email.</div>
</div>