使用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