Пользовательская проверка html5 не работает с угловыми

Я использую следующую форму:

<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()но я не могу установить сообщение об ошибке в поле ввода.

Обновить:

Фактически он показывает сообщение об ошибке при втором щелчке. Зачем?

Сообщения об ошибках активируются при втором щелчке, и даже когда форма действительна, отображается сообщение об ошибке.

angularjs,html5,

2

Ответов: 1


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;
}
angularjs, html5,
Похожие вопросы