Неактивна кнопка Submit (AngularJs 1.8 + ReCaptcha)

Question

Я создал страницу авторизации, и кнопка submit, должна быть активна, когда я заполняю поля, - но этого не происходит

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>reCaptcha Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet"  href="../css/bootstrap.min.css">
    <link rel="stylesheet"  href="../css/bootstrap-theme.min.css">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/angular.min.js"></script>
    <script type="text/javascript" src="../js/main-auth.js"></script>

    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body ng-app="reCaptchaDemo" ng-controller="AppAuthCtrl">
<div class="container" style="margin-top: 60px">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h1 class="page-header">ReCaptcha Demo</h1>
            <form style="margin-bottom: 30px" name="formauth" autocomplete="off" novalidate ng-submit="formauth.$valid && sendForm(auth)">
                <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email"
                           class="form-control"
                           id="exampleInputEmail1"
                           placeholder="Email"
                           required
                           ng-model="auth.email">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password"
                           class="form-control"
                           id="exampleInputPassword1"
                           placeholder="Password"
                           required
                           ng-model="auth.password">
                </div>
                <recaptcha sitekey="6LesprsZAAAAALRJTkkZMyCl0orIWGT2BO1Osi9s"
                           ng-model="auth.recaptchaResponse">
                </recaptcha>
                <button type="submit" class="btn btn-default" style="margin-top:30px" ng-disabled="formauth.$invalid">
                    Submit
                </button>
            </form>
        </div>
    </div>
</div>
</body>
</html>

main-auth.js

angular.module("reCaptchaDemo", [])
    .controller("AppAuthCtrl", function ($scope, $http) {
        $scope.auth = {};
        $scope.sendForm = function(auth) {
            $http({
                method: "POST",
                url: "/register",
                data: $.param(auth),
                headers: { "Content-Type" : "application/x-www-form-urlencoded" }

            }).then(
                function(data) {
                    window.alert("Успешно зарегистрирован");
                },
                function(error) {
                    window.alert("При регистрации произошла ошибка");
                }
            )
        }
    })
    .directive("recaptcha", function() {
        return {
            require: "ngModel",
            restrict: "E",
            scope: {
                sitekey: "@",
                ngModel: "="
            },
            link: function(scope, element, attrs, ngModelCtrl) {
                var reCaptcha = document.createElement("script");
                reCaptcha.type = "text/javascript";
                reCaptcha.async = true;
                reCaptcha.src = "https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit";
                var firstScript = document.getElementsByTagName("script")[0];
                firstScript.parentNode.insertBefore(reCaptcha, firstScript);

                window.onLoadReCaptchaCallback = function() {
                    grecaptcha.render(element.get(0), {
                        "sitekey": scope.sitekey,
                        "callback": onRecaptchaSubmit,
                        "expired-callback": onRecaptchaExpired
                    });
                };

                window.onRecaptchaSubmit = function(gRecaptchaResponse) {
                    scope.ngModel = gRecaptchaResponse;
                    ngModelCtrl.$setViewValue(gRecaptchaResponse);
                };

                window.onRecaptchaExpired = function() {
                    scope.ngModel = "";
                    ngModelCtrl.$setViewValue("");
                };

                ngModelCtrl.$validators.recaptchaValidate = function(modelValue, viewValue) {
                    return !ngModelCtrl.$isEmpty(scope.ngModel);
                }
            }
        }
    });

В чем может быть проблема ?

Answer 1

На кнопке висит условие. Если это условие выполняется - то кнопка дизейблится. Исходя из приведённого кода у вас там условие ng-disabled="formauth.$invalid". Соответственно похоже что formauth.$invalid возвращает true. Поэтому так и получается.

Для быстрого теста в разметке поменяйте в этом условии условии ng-disabled="formauth.$invalid" на ng-disabled="false" или вообще уберите это условие и проверьте станет ли кнопка активной. Скорее всего дело в этом.

А по-хорошему нужно смотреть когда и как изменяется formauth.$invalid. Скорее всего именно от этого зависит состояние вашей кнопки.

БЛОГ НА HUSL

Неактивна кнопка Submit (AngularJs 1.8 + ReCaptcha)

Ответы (1 шт):