angularjs - 混合 HTML5 和自定义 angularjs 验证

Question

给定以下输入字段:

<input type="text" class="form-control" data-ng-model="selectedUser.userName" data-ng-hide="selectedUser.uuid" required name="userName">

如果用户没有输入值，required 标签会让浏览器在提交表单时显示一个很好的错误。但是，我想在此字段上做一些额外的验证:创建新用户时，用户名必须不存在。

使用 angular 进行实际验证非常简单:

$scope.submit = function() {

    userService.getByUserName($scope.selectedUser.userName, function(data) {
        if (!data) {
            $scope.userForm.userName.$setValidity("unique", false);
        }
    });

    if ($scope.userForm.$invalid) {
        return;
    }
    ...
}

在这种情况下，如何显示 HTML5 验证错误？

看起来 angular 的常见方式是有一个像这样的自定义错误消息:

<span style="color:red" ng-show="userForm.userName.$error.unique">We have met before...</span>

但是我最终会得到两种我不想要的不同风格的错误消息。

我如何利用 Angular 的 HTML5 setCustomValidity() 功能(允许您为 HTML5 验证设置自定义错误消息)？

Answer 1

您可以通过添加 novalidate 属性来移除 HTML5 验证。

<input type="text" class="form-control" data-ng-model="selectedUser.userName" data-ng-hide="selectedUser.uuid" required name="userName" novalidate>