count number of required field in form in angular js?

Question

could you please tell me how to count the number of required field in form in angular js ? In my form there is two required field is present (email, select view).So I want to show 2 in my page .when I fill email .it should show only 1 .But when I select value from select view it should show 0 value.

so I make a directive and try to broadcast count value to controller but it is not giving correct value here is my code 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

You are missing the name attribute in the form elements and the 'ng-model' attribute on element.

 <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" would simply display the no of required fields .

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

Here is the DEMO - http://codepen.io/anon/pen/jrzZLX?editors=1010#anon-login

Answer 2

you can use form.$error.required.length

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