使用ngClass和AngularJS無法正常工作的表單驗證

Question

我是新來的角，我嘗試（和失敗）讓ngClass在基本聯繫表單上進行一些驗證。

如果數據存在任何問題，我想通過使用bootstrap'has-error'和'glyphicon-remove'類突出顯示它們在成功/錯誤時的輸入。

我的表格如下;

<form class="row instant-quote-form" ng-controller="formCtrl" ng-cloak> 
        <div class="col-md-12"> 
         <h2>Quick Form</h2> 
         <div class="form-group has-feedback"> 
          <div class="input-group col-md-12"> 
           <label for="titleSelect" class="input-group-addon">Title :</label> 

           <select name="titleSelect" id="titleSelect" class="form-control" 
             ng-model="form.titleResult" required> 
            <option value="">Select Title...</option> 
            <option ng-repeat="option in titles" value="{{option.name}}">{{option.name}}</option> 
           </select> 
          </div> 
          <div class="input-group col-md-12" ng-class="{ 'has-error': form.name.$invalid, 'text-success' : form.name.$valid}"> 
           <label for="nameInput" class="input-group-addon">Name :</label> 
           <input type="text" class="form-control" id="nameInput" placeholder="Full Name..." ng-model="form.name" required> 
           <span ng-class="{ 'glyphicon-remove' : form.name.$invalid, 'glyphicon-ok' : form.name.$valid }" class="glyphicon form-control-feedback"></span> 
          </div> 

          <div class="input-group col-md-12"> 
           <label for="postcodeInput" class="input-group-addon">Postcode :</label> 
           <input type="text" class="form-control" id="postcodeInput" placeholder="Postcode..." ng-model="form.postcode" required> 
           <span class="glyphicon form-control-feedback"></span> 
          </div> 
          <div class="input-group col-md-12"> 
           <label for="emailInput" class="input-group-addon">Email :</label> 
           <input type="email" class="form-control" id="emailInput" placeholder="Email Address..." ng-model="form.email" required> 
           <span class="glyphicon form-control-feedback"></span> 
          </div> 
          <div class="input-group col-md-12"> 
           <label for="telephoneInput" class="input-group-addon">Telephone :</label> 
           <input type="text" class="form-control" id="telephoneInput" placeholder="Telephone Number..." ng-model="form.telephone" required> 
           <span class="glyphicon form-control-feedback"></span> 
          </div> 
          <div class="input-group col-md-12"> 
           <label for="timeSelect" class="input-group-addon">To to Call :</label> 

           <select name="timeSelect" id="timeSelect" class="form-control" 
             ng-model="form.timeResult" required> 
            <option value="">Select Time...</option> 
            <option ng-repeat="option in times" value="{{option.name}}">{{option.name}}</option> 
           </select> 
          </div> 
          <div class="col-md-12"> 
           <button type="submit" class="btn btn-primary btn-block" ng-click="submit(form)">Request Callback!</button> 
          </div> 
         </div> 
        </div> 
       </form> 

我的控制器如下;

'use strict'; 
app.controller('formCtrl', ['$scope', '$http', function ($scope, $http) { 

$scope.titles = 
    [ 
    { id: '1', name: 'Mr.' }, 
    { id: '2', name: 'Mrs.' }, 
    { id: '3', name: 'Master.' }, 
    { id: '4', name: 'Miss.' }, 
    { id: '5', name: 'Sir.' }, 
    { id: '6', name: 'Dr.' }, 
    { id: '7', name: 'Other.' } 
    ]; 

$scope.times = 
      [ 
    { id: '1', name: 'Morning.' }, 
    { id: '2', name: 'Afternoon.' } 
      ]; 

$scope.submit = function (form) { 

    console.log(form); 
}; 

}]）;

但是，ngclass指令沒有被應用？即使表單無效，該提交似乎也被調用？我是否需要驗證控制器的表單？

Answer 1

的名稱屬性和值添加到您的表單標籤&輸入...

<form name="form" class="row instant-quote-form" ng-controller="formCtrl" ng-cloak> 
& 
<input name="name" type="text" class="form-control" id="nameInput" placeholder="Full Name..." ng-model="name" required> 

，因爲當你在'has-error': form.name.$invalid參考form.name它的工作原理基於斷形式的名稱及輸入的名稱箱

注意有使用form.name爲基於控制器的NG-model的衝突，你會想ng-model="name"

這裏是工作plnkr