Как реализовать проверку формы с помощью Angular JS и Bootstrap?

В веб-форме регистрации пользователя я проверяю через ajax, существует ли уже имя пользователя в БД. Когда имя пользователя уже существует, соответствующий input-text класс будет .has-error.

Редактировать

Я изменил атрибут ng-class на {'has-error':signup.userUnavaliable()}, но даже несмотря на то, что ввод, по-видимому, не получает такой класс, другими словами, текст ввода почты не становится красным.

Я помещаю директиву в оболочку, так как это указано в Bootstrap docs.

Вот как сейчас выглядит моя форма:

<form class="form-inline" role="form">
  <div class="form-group" ng-class="{'has-error':signup.userUnavaliable()}">
    <input type="email" class="form-control input-lg" ng-model="signup.mail" placeholder="e-mail" ng-change="signup.userExists(signup.mail)">
  </div>
  <div class="form-group">
    <input type="password" class="form-control input-lg" placeholder="Contraseña" ng-nodel="signup.password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox" ng-model="signup.role" value="admin"> Administrador
    </label>
  </div>
  <button type="submit" class="btn btn-primary" ng-disabled="signup.unavaliable">Registrar</button>
</form>

А это мой контроллер:

app.controller('SignUpController',function ($scope, $http) {

    $scope.userUnavaliable = function() {
        
        return $scope.unavaliable
    }

    $scope.print = function(msg) {

        console.log(msg)
    }

    this.userExists = function(mail) {

        if (mail) {

            var who = $http.get("/existingUsers/"+mail)

            who.success(function(data,status, headers, config) {
                if (data.mail) {
                    $scope.unavaliable = true
                    console.log(data.mail + " ya existe en la DB")
                }
                else{
                    $scope.unavaliable = false
                }
            });

            who.error(function(data, status, headers, config) {
                    alert("AJAX failed!");
            })
        }

    }

})

Кроме того, я пытаюсь отключить кнопку, и это не дает такого эффекта, поэтому я думаю, что у моего контроллера есть проблема.


person diegoaguilar    schedule 27.05.2014    source источник


Ответы (2)


Как указано в состояниях проверки начальной загрузки, если вы хотите, чтобы цвет вашей метки был изменен в соответствии с состоянием проверки ввода, вам нужно будет применить к этому ng-класс.

Вот пример кода, который я написал некоторое время назад. Обратите внимание, чтобы воспользоваться преимуществами состояний проверки Angular JS для элементов формы, вам необходимо указать name для всех типов ввода.

Этот код изменит цвет поля ввода и метки на красный или зеленый в зависимости от состояния проверки.

<div class="form-group" 
             ng-class="( newProfileForm.email.$dirty ? (newProfileForm.email.$valid ? 'has-success has-feedback' : 'has-error has-feedback' ) : ' ')"
             >

                <label class="col-sm-4 control-label">Email</label>

                <div class="col-sm-6">
                    <input type="email" name="email" class="form-control" ng-model="user.mail" ng-required='true'>    

                    <!-- Invalid Span -->           
                    <span ng-if='newProfileForm.email.$invalid && newProfileForm.email.$dirty' class="glyphicon glyphicon-remove form-control-feedback"></span>

                    <!-- Valid Span -->
                    <span ng-if='newProfileForm.email.$valid' class="glyphicon glyphicon-ok form-control-feedback"></span>
                    <p ng-show="newProfileForm.email.$invalid && newProfileForm.email.$dirty" class="bg-danger pad">Please enter valid email.</p>
                </div>           
        </div>

[EDIT] Объяснение атрибута имени. Angular использует атрибут name для определения состояния элемента управления вводом. Итак, если у вас есть элемент управления вводом с именем username. Даже ваша форма должна иметь имя для угловых состояний проверки.

AngularJS будет использовать следующие переменные для проверки состояния проверки.

formname.username.$valid = если имя пользователя соответствует правилам проверки.

formname.username.$invalid = если имя пользователя неверно

formname.username.$dirty = если пользователь редактировал поле ввода

formname.username.$pristine = если пользователь не редактировал поле ввода.

Angular использует атрибут имени для проверки.

И если вы хотите, чтобы ваша кнопка была отключена в зависимости от доступности пользователя. Используйте что-то вроде

<button class="btn btn-default" ng-disabled="unavaliable">Submit</button>
person Paras    schedule 27.05.2014
comment
Я сейчас проверяю, почему это name должно быть установлено? - person diegoaguilar; 27.05.2014
comment
Я объясняю это в ответе. - person Paras; 27.05.2014
comment
Честно говоря, это было совсем другое. Я даже открыл еще один вопрос, связанный только с областью Angular, который решил проблему. Можете ли вы проверить это и отредактировать свой вопрос вокруг него. Заголовок stackoverflow.com/questions/23881283/ - person diegoaguilar; 27.05.2014

пытаться

 <div class="form-group" ng-class="{'has-error':signup.userUnavaliable()}">
person Dayan Moreno Leon    schedule 27.05.2014
comment
Это решило проблему с ошибкой, теперь проблема в том, что ввод не становится красноватым (имеет ошибку) ... - person diegoaguilar; 27.05.2014
comment
проблема в том, что класс применяется к вашей оболочке from, поэтому, если вы хотите применить класс в элементе ввода, вам нужно добавить директиву ng-class к элементу ввода или просто написать правило css, указывающее .has- ошибка ввода[тип=электронная почта]{граница: сплошная 1px красная; что-то подобное} - person Dayan Moreno Leon; 27.05.2014
comment
Сейчас я тестирую, однако документы Bootstrap говорят, что его следует применять к оболочке. - person diegoaguilar; 27.05.2014
comment
не сработало, попробовал как вы посоветовали, но не получил ожидаемого результата - person diegoaguilar; 27.05.2014
comment
ой извините забыл про бустерп. убедитесь, что класс установлен, возможно, ваша функция не дает правильного результата - person Dayan Moreno Leon; 27.05.2014
comment
Да, я думаю об этом - person diegoaguilar; 27.05.2014