在无效电子邮件上显示 ng-message，而不在 Angular 材料中使用 ng-pattern答案

【问题标题】：Display ng-message on invalid email without using ng-pattern in angular material在无效电子邮件上显示 ng-message，而不在 Angular 材料中使用 ng-pattern
【发布时间】：2017-02-09 22:32:13
【问题描述】：

我想在无效的电子邮件条目上显示错误消息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>

【问题讨论】：

标签： html angularjs angular-material

【解决方案1】：

正如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>

【讨论】：