“For the great doesn’t happen through impulse alone, and is a succession of little things that are brought together.”
— Vincent van Gogh
It’s only just the very beginnings, but I am really starting to like how things are turning out, at least so far. There is a lot left to do, and so much so that it is difficult to decide on what should be tackled next, but at least things are starting to take shape, and you can begin to see where things might lead. If you were paying close attention, you will notice that my initial HTML structure left out a couple of key elements from the example that we lifted from the Incident form. One is the hidden INPUT element that contains the original value and the other is the DIV element that contains all of the “extras” — that collection of little icons to the right of the INPUT element that do things like pop up the details for a reference field or provide some other functionality related to the value of the field. The first I skipped because I wasn’t exactly sure what value that provided in the AngularJS world, and the second I skipped because I’m not exactly sure how I would support that feature at this point. I may go back to one or both of those at some point, but for now, I’ve left those out of this little experiment.
So, the question remains: where do we go from here? Although I’m seriously tempted to start adding support for additional input types beyond text and textarea, I think I will defer that for now and start digging into field validation. I’ve been doing a little reading on HTML5 form validation and AngularJS form validation, and it appears that you have to make a conscious decision to go one way or another. Not being that familiar with either one, it will be a learning experience for me either way, so I thought briefly about just flipping a coin just to get the deciding part over with. After further review, though, I decided to go the AngularJS route, mainly because I need to learn a lot more about AngularJS anyway.
As usual, I hunt down the easy parts first and get those out of the way. There are a handful of static values that I want to use for reference purposes, so I came up with those first:
var SUPPORTED_TYPE = ['text', 'textarea'];
var RESERVED_ATTR = ['ng-model', 'class', 'id', 'name', 'required'];
var STD_MESSAGE = {
email: "Please enter a valid email address",
max: "Please enter a smaller number",
maxlength: "Please enter fewer characters",
min: "Please enter a larger number",
minlength: "Please enter more characters",
number: "Please enter a valid number",
pattern: "Please enter a valid value",
required: "This information is required",
url: "Please enter a valid URL",
date: "Please enter a valid date",
datetimelocal: "Please enter a valid local date/time",
time: "Please enter a valid time",
week: "Please enter a valid week",
month: "Please enter a valid month"
};
The first is an array of supported types, which right now just stands at text and textarea. I plan to expand on that in the future, and this array will help make those additions a little easier. The second is an array of reserved attributes, and the purpose of that one is to allow me to copy all of the attributes from the original snh-form-field element over to the generated input element, except those that are on that list (well, those that are on that list, plus any that start with snh- or $). That way, developers can specify any additional attributes and they will be carried forward as long as they are not already used in the processing of the directive. The last is a list of standard validation messages, which I also might expand on at some point in the future. I found that initial list of potential keys out on the Interwebs somewhere, and it looked like a good place to start, so I went ahead and grabbed it and tried to come with an appropriate message for each one.
.I already included the code that uses that first one in my last installment, but let’s reproduce it here, just to show how that is supposed to work:
var type = attrs.snhType || 'text';
type = type.toLowerCase();
if (SUPPORTED_TYPE.indexOf(type) == -1) {
type = 'text';
}
Initially, we get the type from the snh-type attribute, or if you don’t provide one, we default it to text. Then, we convert it to lower case and check it against our array of supported types. If we don’t find it on the list, then again, we default it over to text. This ensures that we are always working with a valid, supported type.
The second array contains any attributes that might be used in our template, and we maintain that list so that we don’t pass along any conflicting values for any of those. When we copy over the remaining attributes, which we do in a function so that it can be called from multiple places, we use the list in much the same was as we did this first one, but this time we are not looking for the ones to keep, but rather the ones to avoid.
function passThroughAttributes(attrs) {
var tags = '';
for (var name in attrs) {
if (name.indexOf('snh') != 0 && name.indexOf('$') != 0 && RESERVED_ATTR.indexOf(name) == -1) {
tags += ' ' + name + '="' + attrs[name] + '"';
}
}
return tags;
}
Basically, if it doesn’t start with snh and it doesn’t start with $ and it isn’t found on the list, then we go ahead and pass it through to the generated INPUT field, whatever that happens to be.
The last item is not an array, but a simple object, or data map, of the standard messages to use for the known list of possible validation error key values. I created an attribute called snh-messages so that developers could override these messages, but the basic idea here that there is a default message for everything, and if that’s good enough for your purposes, then there is nothing more for you to have to do.
for (var key in elem.$error) {
elem.validationErrors += separator;
if (overrides[key]) {
elem.validationErrors += overrides[key];
} else if (STD_MESSAGE[key]) {
elem.validationErrors += STD_MESSAGE[key];
} else {
elem.validationErrors += 'Undefined field validation error: ' + key;
}
separator = '<br/>';
}
The above code loops through all of the validation errors, and if an override value was provided, that is the message that will be used. If not, and there is a standard message available, then that is the message that will be used. If there is no override and no standard message, then we report the fact that we do not have a message to go along with that particular error, and include the error key.
So, the full thing looks like this at this point:
function() {
var SUPPORTED_TYPE = ['text','textarea'];
var RESERVED_ATTR = ['ng-model', 'class', 'id', 'name', 'required'];
var STD_MESSAGE = {
email: "Please enter a valid email address",
max: "Please enter a smaller number",
maxlength: "Please enter fewer characters",
min: "Please enter a larger number",
minlength: "Please enter more characters",
number: "Please enter a valid number",
pattern: "Please enter a valid value",
required: "This information is required",
url: "Please enter a valid URL",
date: "Please enter a valid date",
datetimelocal: "Please enter a valid local date/time",
time: "Please enter a valid time",
week: "Please enter a valid week",
month: "Please enter a valid month"
};
return {
restrict: 'E',
replace: true,
require: ['^form'],
template: function(element, attrs) {
var htmlText = '';
var form = attrs.snhForm;
var name = attrs.snhName;
var fullName = form + '.' + name;
var type = attrs.snhType || 'text';
type = type.toLowerCase();
if (SUPPORTED_TYPE.indexOf(type) == -1) {
type = 'text';
}
var required = attrs.snhRequired && attrs.snhRequired.toLowerCase() == 'true';
var model = attrs.snhModel;
var value = '';
htmlText += " <div id=\"element." + name + "\" class=\"form-group\">\n";
htmlText += " <div id=\"label." + name + "\" class=\"snh-label\" nowrap=\"true\">\n";
htmlText += " <label for=\"" + name + "\" class=\"col-xs-12 col-md-4 col-lg-6 control-label\">\n";
htmlText += " <span id=\"status." + name + "\"";
if (required) {
htmlText += " ng-class=\"" + model + ">''?'snh-required-filled':'snh-required'\"";
}
htmlText += "></span>\n";
htmlText += " <span title=\"" + attrs.snhLabel + "\" data-original-title=\"" + attrs.snhLabel + "\">" + attrs.snhLabel + "</span>\n";
htmlText += " </label>\n";
htmlText += " </div>\n";
if (attrs.snhHelp) {
htmlText += " <div id=\"help." + name + "\" class=\"snh-help\">" + attrs.snhHelp + "</div>\n";
}
if (type == 'textarea') {
htmlText += " <textarea class=\"form-control\" ng-model=\"" + model + "\" id=\"" + name + "\" name=\"" + name + "\"" + passThroughAttributes(attrs) + (required?' required':'') + "></textarea>\n";
} else {
htmlText += " <input class=\"form-control\" ng-model=\"" + model + "\" id=\"" + name + "\" name=\"" + name + "\" type=\"" + type + "\"" + passThroughAttributes(attrs) + (required?' required':'') + "/>\n";
}
htmlText += " <div id=\"message." + name + "\" ng-show=\"" + fullName + ".$touched && " + fullName + ".$invalid\" class=\"snh-error\">{{" + fullName + ".validationErrors}}</div>\n";
htmlText += " </div>\n";
return htmlText;
function passThroughAttributes(attrs) {
var tags = '';
for (var name in attrs) {
if (name.indexOf('snh') != 0 && name.indexOf('$') != 0 && RESERVED_ATTR.indexOf(name) == -1) {
tags += ' ' + name + '="' + attrs[name] + '"';
}
}
return tags;
}
},
link: function(scope, element, attrs, ctls) {
var form = ctls[0].$name;
var name = attrs.snhName;
var fullName = form + '.' + name;
var overrides = {};
if (attrs.snhMessages) {
overrides = JSON.parse(attrs.snhMessages);
}
scope.$watch(fullName + '.$valid', function (isValid) {
var elem = scope.$eval(fullName);
elem.validationErrors = '';
var separator = '';
if (!isValid) {
for (var key in elem.$error) {
elem.validationErrors += separator;
if (overrides[key]) {
elem.validationErrors += overrides[key];
} else if (STD_MESSAGE[key]) {
elem.validationErrors += STD_MESSAGE[key];
} else {
elem.validationErrors += 'Undefined field validation error: ' + key;
}
separator = '<br/>';
}
}
});
}
};
}
One thing that I had to do temporarily was to pass the name of the form to the template as an attribute. I don’t think that I should have to do that, and I really don’t like it, but I spent way too much time trying to figure out how to pick that up from the element itself with no success, so I put that aside for now and just passed it in as another attribute. I don’t like that, though, and I really don’t think that that should be necessary, but for now, I have put that aside for another day and intend to go back to it at some point and make that right.
There is still a lot more to do, but it is starting to come together. Next time, I think I will do a little testing to make sure all of this works, and then maybe explore supporting a few more different type values.
