I am new to both Angular and Bootstrap, so take this with a grain of salt.
I have a requirement to have multiple form elements in a form group in a horizontal form.
<div class="form-group" show-errors>
<label for="firstName" class="col-sm-2 control-label">First Name*</label>
<div class="col-sm-4">
<input name='firstName' type="text" class="form-control" id="firstName" placeholder="First Name" ng-maxlength="50" ng-model="addPersonCtrl.dto.person.firstName" required>
<p class="help-block" ng-show="addPersonForm.firstName.$error.required">First name is required</p>
<p class="help-block" ng-show="addPersonForm.firstName.$error.maxlength">Max length exceeded</p>
</div>
<label for="lastName" class="col-sm-2 control-label">Last Name*</label>
<div class="col-sm-4">
<input name='lastName' type="text" class="form-control" id="lastName" placeholder="Last Name" ng-maxlength="50" ng-model="addPersonCtrl.dto.person.lastName" required>
<p class="help-block" ng-show="addPersonForm.lastName.$error.required">Last name is required</p>
<p class="help-block" ng-show="addPersonForm.lastName.$error.maxlength">Max length exceeded</p>
</div>
</div>
Coding it like this (which I believe to be correct) if one item in the row becomes invalid, the errors are shown on all items in the form group. As a work around I have created my own class, dh-sub-form-group, and applied it to a span that wraps the form elements:
<div class="form-group" >
<span class="dh-sub-form-group" show-errors>
<label for="firstName" class="col-sm-2 control-label">First Name*</label>
<div class="col-sm-4">
<input name='firstName' type="text" class="form-control" id="firstName" placeholder="First Name" ng-maxlength="50" ng-model="addPersonCtrl.dto.person.firstName" required>
<p class="help-block" ng-show="addPersonForm.firstName.$error.required">First name is required</p>
<p class="help-block" ng-show="addPersonForm.firstName.$error.maxlength">Max length exceeded</p>
</div>
</span>
<span class="dh-sub-form-group" show-errors>
<label for="lastName" class="col-sm-2 control-label">Last Name*</label>
<div class="col-sm-4">
<input name='lastName' type="text" class="form-control" id="lastName" placeholder="Last Name" ng-maxlength="50" ng-model="addPersonCtrl.dto.person.lastName" required>
<p class="help-block" ng-show="addPersonForm.lastName.$error.required">Last name is required</p>
<p class="help-block" ng-show="addPersonForm.lastName.$error.maxlength">Max length exceeded</p>
</div>
</span>
</div>
and then modified the show-errors javascript code to look for a different class:
return {
restrict: 'A',
require: '^form',
compile: function(elem, attrs) {
if (!elem.hasClass('dh-sub-form-group')) {
throw "show-errors element does not have the 'dh-sub-form-group' class";
}
return linkFn;
}
and modified the css
.dh-sub-form-group .help-block {
display: none;
}
.dh-sub-form-group.has-error .help-block {
display: block;
}
Is there a better way to do this or maybe this could be a future enhancement to support multiple form elements per group.
thanks
I am new to both Angular and Bootstrap, so take this with a grain of salt.
I have a requirement to have multiple form elements in a form group in a horizontal form.
Coding it like this (which I believe to be correct) if one item in the row becomes invalid, the errors are shown on all items in the form group. As a work around I have created my own class, dh-sub-form-group, and applied it to a span that wraps the form elements:
and then modified the show-errors javascript code to look for a different class:
and modified the css
Is there a better way to do this or maybe this could be a future enhancement to support multiple form elements per group.
thanks