Question

我有一个Angular 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

指定span的{{1}}未关闭。
Invalid Email中的值应为ng-pattern / $scope对象或原始字符串（即引号之间）。
电子邮件模式似乎不完整。
在您的示例中，我们不知道vm来自何处。
您正在谈论服务电话，我们没有任何关于此的信息。如果要从服务调用进行验证，则应创建自定义异步验证器。

我将你的代码推到frmAgentProfile工作的小提琴中。

<强> HERE

Answer 2

来自后端服务调用的数据在正则表达式失败的电子邮件末尾有一个空格字符，并且该空间在UI上的文本框中不可见，并且这就是表格失效的原因。

Angular JS ng-form数据绑定之前的电子邮件验证

2 个答案: