Form validation and dynamic controls in AngularJS

Question

I have a form with a section of controls. I have a button which adds more sections on the form dynamically.

I have validations on each of those controls i.e. ng-required, and other validations.

I have a submit button and I have a validation error on click.

I have invalid values in the control and click submit, the validations are fired and all is good. After clicking the submit button if I try to add a new section, because the section has controls with empty values and since the form is submitted the validations fire and by default I see error messages, which is not a good user experience, hence can someone please help me to avoid this behaviour?

Please find below the code I have:

<div class="row bottom-spaced-large">
        <div class="row">
            <div class="col-md-3">
                Number of ear tags
            </div>
            <div class="col-md-9">
                <input name="txtNumber" tabindex="102" ng-pattern="/^[0-9]*$/" ng-maxlength="50" ng-model="someValue" class="form-control color-black" tabindex="3" />
                <div class="row" style="padding-left: 30px" ng-if="someForm.$submitted && !someForm.txtNumber.$valid">
                    <span style="color: red">Number must be a positive number.</span>
                </div>
            </div>
        </div>
    </div>


<div class="row bottom-spaced-large">
        <button type="button" class="btn btn-primary btn-add" tabindex="101" ng-click="addMore();">Add more<span aria-hidden="true" class="fa fa-plus"></span></button>
    </div>


<button type="submit" class="btn btn-default btn-xs fixed-width" ng-click="doSomething()" tabindex="104">Next</button>

Vivek · Accepted Answer · 2015-12-22 10:16:09Z

1

As per the standard practices, you should disable the save button until the form is valid and show the validation messages only when user interacts with the field (i.e. when the field is touched).

For this angular provides $touched attribute on form field which is set true only when user interacts with the field.

So the following code will solve your problem

<input name="txtNumber" tabindex="102" ng-pattern="/^[0-9]*$/" ng-maxlength="50" ng-model="someValue" class="form-control color-black" tabindex="3" />
                <div class="row" style="padding-left: 30px" ng-if="someForm.$submitted && !someForm.txtNumber.$valid">

<div class="row" style="padding-left: 30px" ng-show="someForm.txtNumber.$touched && someForm.txtNumber.$invalid">
  <span style="color: red">Number must be a positive number.</span>
</div>

<button type="submit" ng-disabled="someForm.$invalid" class="btn btn-default btn-xs fixed-width" ng-click="doSomething()" tabindex="104">Next</button>

Edit: If you want to prompt users why save button is disabled. You can put the following div at the top of the form.

<div ng-show="someForm.$invalid && someForm.$pristine" class="bg-danger">  
   Please fill the form to continue!
</div>

$pristine is set true if no changes are made to the value of form field (even if field is touched and no changes are made it is true), Whereas $touched is set true on touching the field no matter value is changed or not.

edited Dec 22, 2015 at 10:16

answered Dec 22, 2015 at 8:45

Vivek

13.6k19 gold badges101 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Karthik G Over a year ago

Thanks a ton for this answer, I am totally satisfied with the answer and this is correct as well. However, my scenario is that I do not have any sort of help text for each of the controls, hence if I disable the button then users wont be able to understand why the next button is disabled. Is there a way to show errors in this scenario. Also ow is $touched different from $pristine?

Collectives™ on Stack Overflow

Form validation and dynamic controls in AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related