angularjs - html5 自定义验证不适用于 Angular

Question

我正在使用下面的表格:

<form name="signupForm" id="register-form" ng-submit="addUser(user)" method="POST">
    <div class="row">
        <input type="email" ng-model="user.email" id="reg_email" class="form-control" placeholder="Email" required pattern="[^@\s]+@[^@\s]+\.[^@\s]+" minlength="5" maxlength="40" required>
        <input type="password" ng-model="user.password" id="reg_password" class="form-control" placeholder="Password" required='true' minlength="3" maxlength="10" required>
        <input type="submit" id="reg_submit" class="submit-input grad-btn ln-tr" value="Submit">
    </div>
</form>

当表单出现错误时，我在输入时设置 setCustomValidity()。

auth.signup($scope.userData, successAuth, function (error) {
    $rootScope.error = error.error;
    console.log("error: " , $rootScope.error);

    if($rootScope.error == "user already exists"){
        var input = document.getElementById("reg_email");
        input.setCustomValidity("$rootScope.error");
    } else{
        var input = document.getElementById("reg_email");
        input.setCustomValidity("");
        angular.element('#register-modal').modal('hide');
        document.getElementById("register-form").reset();
    }
});

由于 setCustomValidity()，模态窗体没有关闭，但我无法显示我在输入字段中设置的错误消息。

更新:

实际上它是在第二次点击时显示错误消息。为什么？

错误消息在第二次点击时激活，即使表单有效，它也会显示错误消息。

Answer 1

我是这样改的。希望对某些人有所帮助。

auth.signup($scope.userData, successAuth, function (error) {
    $rootScope.error = error.error;
    if ($rootScope.error == "user already exists") {
        $scope.signupForm.reg_email.$setValidity("User already exists", false);
    }
});

HTML:

<form novalidate>
    <input type="email" ng-model="user.email" id="reg_email" name="reg_email" required>
    <span ng-show="signupForm.reg_email.$invalid" class="custom-help-block">User already exists</span>
</form>

CSS:

.custom-help-block{
    color: red;
    margin-left: 5px;
    font-weight:bold;
}