角JS数据绑定

Question

前NG-形式的电子邮件验证我有如下的角度JS形式：

<div ng-controller="EmpController as empVm" 
name="formEmployee" ng-form > 
     <div> 
      <div class="col-sm-5"> 
       Email 
      </div> 
      <div class="col-sm-7"> 
       <input type="email" validate-length ng-maxlength="2000" 
         ng-model="empVm.profileData.email" name="email" 
         ng-pattern="^[_a-zA-Z0-9]+(\.[_a-zA-Z0-9]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,4})$"/> 
       <div ng-show="(formEmployee.email.$dirty || formEmployee.email.$touched) && formEmployee.email.$invalid"> 
        <span ng-show="!formEmployee.email.$error.pattern">Invalid Email</span> 
       </div> 
      </div> 
     </div> 
</div> 

即使电子邮件字段具有有效的电子邮件的形式始终是无效的。一旦我与电子邮件文本框进行交互，例如更改电子邮件文本框中的某些文本，表单将再次变为有效。

我想实现的是，表单应该验证电子邮件文本框的数据，一旦该值从服务调用绑定，并且表单应该在页面加载后有效，如果它是有效的电子邮件，其他表单应该是无效的并出现上述具有无效电子邮件的div。

Answer 1

数据从后端服务呼叫来了空格字符在为其正则表达式失败电子邮件的结尾，并在文本框的空间是不可见的UI，这就是该表格变得无效的原因。

Answer 2

1. 指定Invalid Email的span未关闭。
2. ng-pattern中的值应该是$scope/vm对象或原始字符串（即引号之间）。
3. 电子邮件模式似乎并不完整。
4. 在你的例子中，我们不知道frmAgentProfile来自哪里。
5. 您正在讨论服务电话，我们没有任何关于此的信息。如果你想从服务调用中进行验证，你应该创建一个自定义的异步验证器。

我把你的代码放在ng-pattern工作的小提琴里。

HERE