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>

Answer 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.