HTML5自定义验证不与角

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; 
}