“All progress is precarious, and the solution of one problem brings us face to face with another problem.”
— Martin Luther King, Jr.
Some things I really like, and others not so much. I like the standard look and feel that you get when you use the same template for everything, and I really like the way that the required marker works without even leaving the field, but I’m not quite sold on the way that the field validation works just yet. I think that could use a little work somewhere, although I am not exactly sure where.
This is the line that triggers the validation:
scope.$watch(fullName + '.$valid', function (isValid) {
Basically, we are watching the $valid property of the field, and then updating the messages based on the $errors that are present for that particular field. Unfortunately, if you have a field with multiple validations, such as a required field with a minimum length, the field is not $valid when it is empty, and it is also not $valid when it is too short. When you start typing in the field, the required field error message does not get replaced with the field too short error message because the state never changed from not being $valid. This leaves a misleading error message underneath that field, which I don’t really care for. I may have to adjust my approach on that to work around that problem. But that’s not really today’s issue, so I’m going to have to set that aside for now.
What I really want to do is test what I have built so far. To expand my testing, I added a few more supported types, but I haven’t really tried them all just yet. Right now, my static list looks like this:
var SUPPORTED_TYPE = ['date', 'datetime-local', 'email', 'month', 'number', 'password', 'tel', 'text', 'textarea', 'time', 'url', 'week'];
Although I haven’t tried testing them all, I did expand my test page just a little to try a few more things out. I added some additional attributes to make sure that those got passed in OK, I added some custom error messages to verify that that process was working as it should, and then added an email field to see how that new type rendered out as well. Here is the latest version of that test page:
<snh-panel title="'${Form Field Test}'">
<form id="form1" name="form1" novalidate>
<div class="row">
<div class="col-xs-12 col-sm-6">
<snh-form-field
snh-form="form1"
snh-model="c.data.firstName"
snh-name="firstName"
snh-label="First Name"
snh-type="text"
snh-required="true"
snh-messages='{"required":"You must enter a First Name"}'/>
<snh-form-field snh-form="form1"
snh-model="c.data.middleName"
snh-name="middleName"
snh-label="Middle Name"
snh-type="text"
snh-required="false" />
<snh-form-field
snh-form="form1"
snh-model="c.data.lastName"
snh-name="lastName"
snh-label="Last Name"
snh-type="text"
snh-required="true"
minlength="5"/>
</div>
<div class="col-xs-12 col-sm-6">
<snh-form-field
snh-form="form1"
snh-model="c.data.textarea"
snh-name="textarea"
snh-label="Text Area"
snh-type="textarea"
maxlength="20"
snh-help="This is where the field-level help is displayed."/>
<snh-form-field
snh-form="form1"
snh-model="c.data.email"
snh-name="email"
snh-label="Email Address"
snh-type="email"
snh-required="true"
snh-messages='{"required":"You must enter an Email address", "email":"You must enter a valid Email address"}'/>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<snh-form-field
snh-form="form1"
snh-model="c.data.comments"
snh-name="comments"
snh-label="Comments"
snh-type="textarea"/>
</div>
</div>
</form>
</snh-panel>
… and here is how it renders out, after I triggered a few of the validation errors:
For the most part, I am still very pleased with the results so far, but I am definitely going to have to make some adjustments in the validation message area to clean up the way that works. There is still much to be done, but I am getting closer to having a somewhat finished product.
