計算角度js形式的必填字段的數量？

Question

您能告訴我如何在angular js表單中計算所需字段的數量嗎？ 在我的表單中有兩個必填字段（電子郵件，選擇視圖）。所以我想在頁面中顯示2。當我填寫電子郵件時，它應該僅顯示1。但是當我從選擇視圖中選擇值時，它應該顯示0值。

所以我做了一個指令，嘗試將計數值廣播給控制器，但是它沒有給出正確的值，這是我的代碼http://codepen.io/anon/pen/WGzgdE?editors=1010#anon-login

angular.module('app',[]).directive('requiredCount',function($rootScope){
        return {
            restrict: 'EA',
            require: '^form',
            link: {
                post: function (scope, elem, attr, ctrls) {// jshint ignore:line
                    console.log('ctrls.$name', ctrls.$name);
                    scope.$watch(function () {
                        if (ctrls.$error.required) {
                            return ctrls.$error.required;
                        }

                    }, function (newValue, oldValue) {
                        if (newValue && newValue !== oldValue) {
                            var count = newValue.length;
                            newValue.forEach(function (item) {
                                if (item.$error.required) {
                                   // if (item.$valid) {
                                        count--;
                                  //  }
                                }
                            });

                        }
                    });
                }
            }
        };
    }).controller('app',function($scope){
  $scope.$on('count',function(e,a){
    $scope.count =a
  })
});

Answer 1

您缺少表單元素中的name屬性和元素上的'ng-model'屬性。

 <form name='test'  novalidate> 
 <div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" ng-model="user.email"  id="email" required>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
 <input id="pwd" name="pwd" class="form-control"   
  type="password" ng-model="user.password" required></input>
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<select name="carlist" class="form-control" ng-model="user.carlist" id="carlist" required>
 <option value></option>
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="opel">Opel</option>
 <option value="audi">Audi</option>
</select> 
<button type="submit" class="btn btn-default">Submit</button>
</form>

“ test。$ error.required.length”將僅顯示no必填字段。

required field count {{test.$error.required.length}}

這是演示-http: //codepen.io/anon/pen/jrzZLX? editors=1010#anon- login

Answer 2

您可以使用form。$ error.required.length

<div ng-show="form.$invalid">
       Sorry but {{form.$error.required.length}} errors found.
</div>