Input directive with ng-message validation - angularjs

Question

I would like to know if something like this is possible in angular
<form name='form'>
<input-directive-with-ngmessages1 ... inputname='field1' form='form' />
<input-directive-with-ngmessages2 ... inputname='field2' form='form' />
</form>
I know that validation system in angular is working based on form name, but I would like to make components from inputs, move ng-messages inside custom input directives, passing just form name to it, with possiblity to get overall form validation status,
I was looking about dynamic forms/validation on stackoverflow, but I didn't find something like above example, thx in advance

Answer 1

Definitely doable. My suggestion: Require an ngModel to make a custom control (as described here) use transclusion for the messages. Sample code:
app.directive('inputDirectiveWithNgmessages', function() {
return {
restrict: 'E',
template:
'<input type="text" ng-model="ctrl.model" name="ctrl.inputname" />' +
'<div ng-messages="ctrl.$error" role="alert" ng-transclude>' +
// element content, i.e. the messages will be transcluded here
'</div>',
transclude: true,
scope: {},
require: ['ngModel', 'inputDirectiveWithNgmessages'],
link: function(scope, elem, attrs, ctrls) {
var ngModel = ctrls[0];
var inputDirectiveWithNgmessages = ctrls[1];
inputDirectiveWithNgmessages.inputname = attrs.inputname;
inputDirectiveWithNgmessages.setModel(ngModel);
},
controllerAs: 'ctrl',
controller: function($scope) {
var self = this;
this.model = null;
this.setModel = function(ngModel) {
this.$error = ngModel.$error;
ngModel.$render = function() {
self.model = ngModel.$viewValue;
};
$scope.$watch('ctrl.model', function(newval) {
ngModel.$setViewValue(newval);
});
};
}
};
});
Usage is quite simple - place the messages inside the element:
<input-directive-with-ngmessages ng-model="model1" inputname="field1" ng-required="true">
<div ng-message="required">Required field</div>
</input-directive-with-ngmessages>
No need to specify the form name.
And a fiddle: http://jsfiddle.net/12sf82p3/
THE CATCH: Standard validators we have been comfortably using with inputs, e.g. ng-pattern, do NOT work out of the box in this (except for the ng-required). You see ng-pattern is not a directive; it is handled as an attribute by Angular's standard input directive. The workaround is to implement the validators you want as directives and place them on the <input-directive-with-ngmessages>, e.g.:
<input-directive-with-ngmessages ng-model="..." inputname="..." my-pattern="[A-Z][0-9]">
The my-pattern directive will use the standard $validators pipeline of ngModel to implement regular expression validation.
A benefit of this is that the template of the directive can be tweaked to suit any needs. E.g. it could create form element markup for Twitter's Bootstrap.
Finally you may want to take a look at egkyron for an alternative to form validation, i.e. model based validation.