ng-class not working inside directive for form validation - angularjs

Question

I have a form and inside it a directive like this:
addEditUser.html:
<form role="form" class="form-horizontal" novalidate name="addEditUserForm" >
<div class="form-group labelInputContainer">
<label for="emailAddr" class="col-xs-1 col-sm-1 col-md-1 control-label">E-mail</label>
<div class="col-xs-8 col-sm-8 col-md-8">
<input type="text" ng-class="{'invalid': addEditUserForm.emailAddr.$error.required}" maxlength="100" class="form-control" id="emailAddr" name="emailAddr" placeholder="E-mail" ng-model="user.emailAddr" required />
</div>
</div>
<address default-addr="defaultAddr" />
<button type="submit" class="btn greenButton" style="width: 100%;" ng-click="saveUser();" data-ng-disabled="addEditUserForm.$invalid">SAVE</button>
</form>
addEditUserController.js
app.controller('addEditUserController', function ($scope, $routeParams, $location, $filter, reposSvc) {
$scope.defaultAddr = {};
var id = $routeParams.id;
if (id) {
$scope.user = reposSvc.user.get({ id: id },
function (data) {
$scope.defaultAddr = data.defaultAddr;
});
});
the directive HTML (address.html):
<div>
<div class="form-group labelInputContainer">
<label for="streetAddress" class="col-xs-2 col-sm-2 col-md-2 control-label">Street</label>
<div class="col-xs-3 col-sm-3 col-md-3">
<input type="text" ng-class="{'invalid': addEditUserForm.streetAddress.$error.required}" maxlength="100" class="form-control noLimitsTextBox" id="streetAddress" name="streetAddress" ng-model="defaultAddr.streetAddress" placeholder="Street" required />
</div>
<label for="no" class="col-xs-2 col-sm-2 col-md-2 control-label">No</label>
<div class="col-xs-3 col-sm-3 col-md-3">
<input type="text" maxlength="6" class="form-control" id="no" name="no" placeholder="No" />
</div>
</div>
</div>
address.js:
(function () {
'use strict';
app.directive('address', function () {
return {
restrict: 'E',
replace: true,
templateUrl: 'app/directives/address.html',
scope: {
defaultAddr: '='
},
controller: function ($scope, reposSvc, toastr) {
}
};
});
})();
The button is disabled until I fill in all the required fields (in this short example the email and the street). But only the email gets the class "invalid" applied (a background color). So mainly the validation works for both controls, but the ng-class only gets applied on the email field that is in the main html.
What am I doing wrong? how can I get the "invalid" class from ng-class applied on the directive controls too?

Answer 1

The reason is because your directive is isolated scoped (it does not automatically inherit from the parent), so it does not get the special form object added as property on the scope with the name of the property. So you would need to pass that as 2-way binding, or use $parent.addEditUserForm to access it which seems bad though (impact on reusability), or just use scope:true but it may not serve the purpose of your intention of using isolated scope. Validation works because your ng-model is on 2-way bound property ng-model="defaultAddr.streetAddress" which is still attached to the formcontroller instance.
So you could do:
return {
restrict: 'E',
replace: true,
templateUrl: 'app/directives/address.html',
scope: {
defaultAddr: '=',
form:'=' //<-- Add a binding
},
controller: function ($scope, reposSvc, toastr) {
}
};
and
<input type="text" ng-class="{'invalid': form.streetAddress.$error.required}" maxlength="100" class="form-control noLimitsTextBox" id="streetAddress" name="streetAddress" ng-model="defaultAddr.streetAddress" placeholder="Street" required />
and pass it in as:
<address default-addr="defaultAddr" form="addEditUserForm" />
Note: i have used the name as form in the 2-way binding so that it is not tightly coupled with a specific form name and is more reusable.
Or as other options instead of setting class using ng-class just use the ng-invalid, ng-invalid-required etc.. classes added on the element when it is invalid.