AngularJS ng-класс и поведение проверки формы

0

Имейте очень странную проблему, которая, как я думаю, должна работать, но не ведет себя так, как должна:

<div class="form-group" ng-class="{'has-error': !emailstatus && userBooking.email.$dirty, 'has-success': emailstatus}">
    <div class="col-md-12 col-sm-12 col-lg-12 col-xs-12">

        <input class="form-control input-lg" name="email" type="text"placeholder="Mail" ng-model="formData.email" ng-change="email()">
        <label style="margin-top:-8px;"> Ange mailadress</label></br>{{emailmessage}}
    </div>
</div>

Простая проверка формы, у меня есть функция email(), которая проверяет, находится ли электронное письмо, написанное в поле электронной почты, в базе данных, оно должно затем установить форму в ошибку, но это должно произойти только в том случае, если кто-то коснулся формы.

Однако он не ведет себя так, успех в порядке, он становится зеленым, поскольку адрес электронной почты не находится в базе данных

Изображение 174551

и он серый в начале, когда в нем ничего не написано.

Изображение 174551

Однако всякий раз, когда адрес электронной почты в базе данных, форма просто становится серой, а не красной? Но при проверке переменной mailstatus это, безусловно, "ложь", таким образом, должно быть истинным в выражении. Изображение 174551

И, наконец, сделать это более странным, если я изменю выражение ng-класса на:

   {'has-error': !emailstatus, 'has-success': emailstatus}

он работает так, как ожидалось, за исключением неприемлемой причины, по которой он краснеет, даже если пользователь не коснулся его ($ чистая).

Изображение 174551

Электронная почта():

 var checkEmail = function() {
    params = {
        email: $scope.formData.email
    };

    $http({
            method: 'POST',
            url: 'php/emailcheck.php',
            data: $.param(params), // pass in data as strings
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            } // set the headers so angular passing info as form data (not request payload)
        })
        .success(function(data) {
            if (!data) {
                // if not successful, bind errors to error variables
                console.log("error");
            } else {
                if (data === "Yes") {
                    $scope.emailmessage = "Adressen finns redan registrerad, vänligen välj en annan."
                    $scope.emailstatus = false

                } else if (data === "No") {
                    $scope.emailmessage = "Adressen är ledig!"
                    $scope.emailstatus = true
                } else {
                    console.log("nothing happens if the code is wrong")
                }
            }
        });
};
  • 0
    показать соответствующий угловой код.
Теги:
ng-class
twitter-bootstrap-3

1 ответ

0

Чтобы устранить эту проблему:

он работает так, как ожидалось, за исключением неприемлемой причины, что он красный, даже если пользователь не коснулся его ($ чистый)

используйте $, коснувшись свойства (> = Только угловой 1.3).

Это гарантирует, что проверка будет выполняться только в том случае, если вход:

  • инвалид
  • пользователь нажал на вход (т.е. коснулся его)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню