Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Multiple form elements in a form group #22

Closed
seannewby opened this issue Nov 11, 2014 · 2 comments · May be fixed by #36
Closed

Multiple form elements in a form group #22

seannewby opened this issue Nov 11, 2014 · 2 comments · May be fixed by #36

Comments

@seannewby
Copy link

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
@seannewby
Copy link
Author

Ended up changing html code to this which works without modifying the script:

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group" show-errors>
                    <label for="firstName" class="col-md-4 control-label">First Name*</label> 
                    <div class="col-md-8"> 
                        <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>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group" show-errors>
                    <label for="lastName" class="col-md-4 control-label">Last Name*</label>
                     <div class="col-md-8"> 
                        <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>
            </div>
        </div>

jantimon added a commit to jantimon/angular-bootstrap-show-errors that referenced this issue Feb 13, 2015
@jantimon
Add support for multiple input elements in a form-group fixes paulyod…
b5f9b4a 
…er#22 and paulyoder#35
jantimon added a commit to jantimon/angular-bootstrap-show-errors that referenced this issue Feb 13, 2015
@jantimon
Add support for multiple input elements in a form-group fixes paulyod…
539dc59 
…er#22 and paulyoder#35
@jantimon jantimon mentioned this issue Feb 13, 2015
Open
@fabiowitt
Copy link

I was having issue with positioning and validation and used your approach @seannewby thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
2 participants
@seannewby @fabiowitt