Как да внедрите валидиране на формуляр с Angular JS и Bootstrap?

При уеб формуляр за регистрация на потребител проверявам чрез ajax дали потребителско име вече съществува в DB. Когато потребителско име вече съществува, съответният input-text ще премине в .has-error клас.

редактиране

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

Поставям директивата в обвивката, тъй като това е начина, по който документите на Bootstrap я казват.

Ето как изглежда моят формуляр сега:

<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)


Както е посочено в състоянията на валидиране на bootstrap, ако искате цветът на вашия етикет да бъде променен според състоянието на валидиране на входа, ще трябва да приложите ng-class върху това.

Ето примерния код, който бях написал преди малко. Моля, обърнете внимание, че за да се възползвате от състоянията на проверка на 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>

[РЕДАКТИРАНЕ] Обяснение за атрибут име. Angular използва атрибут name, за да определи състоянието на входния контрол. Така че, ако имате контрола за въвеждане с име username. Дори вашият формуляр трябва да има име за състояния на ъглова проверка.

AngularJS ще използва следващите променливи, за да провери състоянието на валидиране.

formname.username.$valid = ако потребителското име е наред според правилата за валидиране.

formname.username.$invalid = ако потребителското име е невалидно

formname.username.$dirty = ако потребителят е редактирал полето за въвеждане

formname.username.$pristine = ако потребителят не е редактирал полето за въвеждане.

Angular използва атрибут name за валидиране.

И ако искате вашият бутон да бъде деактивиран в зависимост от наличността на потребителя. Използвайте нещо подобно

<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 scope, който реши проблема. Можете ли да го проверите и да редактирате въпроса си около него. 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- грешка input[type=email]{ border :solid 1px red; нещо такова} - 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