Angular NG -Pattern-不是电子邮件地址

Question

我正在尝试验证用户名中的用户输入不在电子邮件地址的格式，而是使用带有angular的ng-pattern。以下代码似乎会产生我想要的结果，但是页面加载了显示错误消息，直到用户开始键入为止。除非用户输入匹配电子邮件地址正则表达式，否则错误会消失。如何将该消息隐藏在页面加载中，并且仅在匹配的正则表达式时显示它？谢谢。

<div ng-show="!form.UserName.$error.pattern" class="errorMessage">
    Username is not your email address
</div>    
<div class=" form-group">
    <label class="form-label" for="userName">Username</label>
    <input class="form-control" ng-pattern="/^([a-zA-Z0-9])+([a-zA-Z0-9._%+-])+@([a-zA-Z0-9_.-])+.(([a-zA-Z]){2,6})$/" />
</div>

Answer 1

尝试检查输入是否为"触摸"

<div ng-show="form.UserName.$error.pattern && form.UserName.$touched" class="errorMessage">
    Username is not your email address
</div>