Angular: check if form element is required (whether or not it's already filled in)

Question

I'm aware that you can use $scope.formName.fieldName.$error.required to find out if a specific field has a required attribute which has not been fulfilled. You can also use $scope.formName.$error.required to find all fields in a form that have an unsatisfied required attribute.

I'm looking to find out weather or not a field is required. This is regardless of weather or not the user has already filled in that field. How can I do this?

N.B. as a result I want something like this {{countFilledRequiredFields()}}/{{countAllRequiredFields()}}, then I can tell the user something like: you have filled in 3/5 of the required fields

Answer 1

You can get all fields that have satisfied the required attribute from:

$scope.formName.$$success.required

And since you can get all fields that have an unsatisfied required attribute from:

$scope.formName.$error.required

You can easily combine the two to achieve what you want. i.e.

allRequiredFieldsCount =
    $scope.formName.$$success.required.length +
    $scope.formName.$error.required.length;

filledRequiredFieldsCount = $scope.formName.$$success.required.length;