Prevent repetition in directive attributes? - angularjs

Question

I have a directive which adds an input inside a bootstrap form-group / form-control
It watches the field's $valid and $invalid values, and sets appropriate bootstrap error/valid css classes.
This is the markup:
<fe-input ng-model='user.first_name' field='first_name' submitted='submitted' label='First Name'></fe-input>
<fe-input ng-model='user.last_name' field='last_name' submitted='submitted' label='Last Name'></fe-input>
<fe-input ng-model='user.phone' field='phone' submitted='submitted' label='Phone'></fe-input>
It relies on a scope variable submitted being set when the user attempts to submit the form (so we don't show invalid fields before the user has done anything)
You can see there is a lot of repetition.
field = model.field : the field name is always the same as the model field name
submitted='submitted' : repeated every time
Ideally I'd like to cut it down to this:
<fe-input ng-model='user.first_name' label='First Name'></fe-input>
<fe-input ng-model='user.last_name' label='Last Name'></fe-input>
<fe-input ng-model='user.phone' label='Phone'></fe-input>
It would enforce:
form field's name is always the same as model's field name
submitted on the parent scope is implicitly required
Questions:
Is this even possible?
If so, any suggestions on how to achieve this?
Plunker:
Here is a plunker showing what I've currently got.
Directive source code:
This is my directive's html template:
<div class="form-group" ng-class="{ 'has-success': submitted && isValid,
'has-error' : submitted && isInvalid }">
<label class="control-label" for="{{ field }}">
{{ label }}
</label>
<input type="text"
class="form-control"
ng-model="model"
name="{{ field }}"
id="{{ field }}"
required>
</div>
and the directive source:
angular.module('directive.form-elements', []).directive('feInput', function() {
return {
restrict: 'E',
require: ['^form'],
scope: {
model: '=ngModel',
label: '#',
field: '#',
submitted: '=' // feedback only when the form has been submitted
},
templateUrl: 'components/form-elements/input.html',
replace: true,
link: function (scope, element, attrs) {
scope.$parent.$watch('form.'+scope.field+'.$valid', function(isValid) {
scope.isValid = isValid;
});
scope.$parent.$watch('form.'+scope.field+'.$invalid', function(isInvalid) {
scope.isInvalid = isInvalid;
});
}
};
});
submitted:
submitted is a variable in the form controller's scope, and is shared by all the input elements in the form. It exists solely to enable the valid/invalid styling only when the user has actually attempted to submit the form
angular.module('myApp').controller('UserCtrl', function($scope) {
$scope.submitted = false;
$scope.submit = function(form) {
$scope.submitted = true;
if (!form.$valid)
return;
// do submit
});

Answer 1

One solution is to create a parent directive that handles the repetitive stuff. The HTML could look something like this:
<form name="userForm" fe-form="user">
<fe-input field='first_name' label='First Name'></fe-input>
<fe-input field='last_name' label='Last Name'></fe-input>
<fe-input field='phone' label='Phone'></fe-input>
<button type="submit">Save</button>
<form>
The parent directive:
angular.module('directive.form-elements', []).directive('feForm', function() {
return {
controller: function($scope, attrs) {
var formName = $attrs.name;
var submitted = false;
this.hasSuccess = function(field) {
return submitted && $scope[formName][field].$valid;
};
this.hasError = function(field) {
return submitted && $scope[formName][field].$invalid;
};
this.setSubmitted = function(value) {
submitted = value;
}
},
link: function (scope, element, attrs, controller) {
controller.model = $scope[$attrs.feForm];
element.on('submit', function(event) {
controller.setSubmitted(true);
The important thing is that it has a controller that can be used by your other directive. We also encapsulate the error and success state.
Your original directive:
angular.module('directive.form-elements', []).directive('feInput', function() {
return {
restrict: 'E',
require: ['^form', '^feForm'],
scope: {
field: '#',
label: '#'
},
templateUrl: 'components/form-elements/input.html',
replace: true,
link: function (scope, element, attrs, controllers) {
var feFormController = controllers[1];
scope.model = feFormController.model;
scope.hasSuccess = feFormController.hasSuccess;
scope.hasError = feFormController.hasError;
}
};
});
Here we can use the controller of the parent directive.
Small modifications of your template:
<div class="form-group" ng-class="{ 'has-success': hasSuccess(field),
'has-error' : hasError(field) }">
<label class="control-label" for="{{ field }}">
{{ label }}
</label>
<input type="text"
class="form-control"
ng-model="model[field]"
name="{{ field }}"
id="{{ field }}"
required>
</div>
Please understand that while this code may work for you, it's rather meant as illustration, or a starting point if you will.