如何使用Angular JS和Bootstrap進行表單驗證？

Question

在用戶注冊Web表單中，我通過ajax驗證數據庫中是否已經存在用戶名。 當用戶名已經存在時，相應的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!");
            })
        }

    }

})

另外，我試圖禁用該按鈕，但效果不佳，所以我認為控制器有任何問題。

Answer 1

如引導驗證狀態中給出的，如果您希望根據輸入的驗證狀態更改標簽顏色，則必須在其上應用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>

[EDIT]名稱屬性的說明。 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>

Answer 2

嘗試

 <div class="form-group" ng-class="{'has-error':signup.userUnavaliable()}">