Validating custom directive inside a form - angularjs

Question

I've a form which contains a custom directive that I want to validate. I could do that if the scope is not an isolate scope, but how to proceed if we have an isolate scope case? Here is an example where the form contains 2 fields: first and last name. First name is directly on the form but the last name is within a directive. When i hit 'Save' only first name gets validated. Can somebody point out what am I missing? Code goes somewhat like this:
Main form:
<form class=" form form-group" name="personForm" ng-submit="saveInfo(personForm.$valid, '#/success')" novalidate>
<label for="fname"><strong>First Name:</strong></label>
<input type="text"
name="fname"
class="form-control"
ng-model="person.firstname"
ng-maxlength=10
ng-minlength=3
ng-required="true">
<div class="error-message" ng-messages="personForm.fname.$error" data-ng-if="interacted(personForm.fname)">
<div ng-message="required">This is a required field</div>
<div ng-message="maxlength">max length should be 10</div>
<div ng-message="minlength">min length should be 3</div>
</div>
<last-name ng-model="person"></last-name>
<br/>
<button class="btn btn-primary" type="submit">Save</button>
and the directive (last name):
<label for="lname"><strong>Last Name:</strong></label>
<input type="text"
name="lname"
class="form-control"
ng-model="person.lastname"
ng-maxlength=20
ng-minlength=5
ng-required="required">
<div ng-messages="personForm.lname.$error" data-ng-if="interacted(personForm.lname)">
<div ng-message="required">This is a required field</div>
<div ng-message="maxlength">max length of last name should be 20</div>
<div ng-message="minlength">min length of last name should be 5</div>
</div>
... and finally here is my javascript:
var app = angular.module('MyApp',['ngRoute','ngMessages']);
app.config(function ($routeProvider) {
$routeProvider
.when('/success', {
templateUrl: 'success.html'
})
.when('/', {
templateUrl: 'first-name.html',
controller: 'MyController'
})
})
app.directive('lastName', function() {
return {
restrict: 'E',
scope: {
person: '=ngModel',
},
require:'ngModel',
templateUrl: 'last-name.html'
}
});
app.controller('MyController', function($scope, $location) {
$scope.person = {};
$scope.submitted = false;
$scope.interacted = function(field) {
return $scope.submitted || field.$dirty;
};
$scope.saveInfo = function(isValid, url) {
$scope.submitted = true;
if (isValid) {
$location.path(url);
} else {
alert('Missing values in mandatory fields');
}
}
});

Answer 1

I kinda solved my problem.This is a "poor man's solution" per se so i implore the experts reading this post to suggest me a better way.
My issue was "how will the directive know, if it's parent form has been submitted" (without sharing the scope). My answer was to send another attribute into the directive that indicated the form submission (scope: { formSubmitted: '='}).
app.directive('lastName', function() {
return {
restrict: 'E',
scope: {
formSubmitted: '='
},
require:'ngModel',
templateUrl: './last-name.html',
link: function(scope, element, attrs, controllers) {
scope.$watch('lastname', function() {
controllers.$setViewValue(scope.lastname);
});
}
};
});
So the directive looks a bit silly :( but works.
<last-name ng-model="person.lastname" form-submitted="submitted"></last-name>
... and the "submitted" was something that was used anyways to detect if submit button was pushed.
So with that and some help of other posts on stack overflow (ng-form: to enclose the elements in the directive), I was able to get it working. Here is the plunker for the same.