I have a form that has a series of inputs along with the option of adding more inputs by clicking a button. Each input is required and has $.touched validators already on them, so if a user touches them, they validate properly.
However, if the user hasn't filled out all of the existing inputs, clicking the add button (which is not a form submission) should prevent more inputs from being added (done), and it should trigger the validators on the inputs so that the user has to fill them out.
I have been unable to make that happen. I'm perplexed as to why I can't just arbitrarily fire validation for other elements on an ng-click event.
How do I trigger validation on inputs on a button click, even if the user has not interacted with those fields?
Plunker to show a rough idea of what I mean: http://plnkr.co/edit/LjMz5Ad19izthgKTK6Pi
<input type="text" name="Name" ng-model="editContactsForm.Name" ng-maxlength="100" required />
<small class="error" ng-show="(editContactsForm.Name.$error.required && editContactsForm.Name.$dirty) || (editContactsForm.Name.$error.required && editContactsForm.Name.$touched)">This is a required field.</small>
<br/>
<input type="text" name="Name2" ng-model="editContactsForm.Name2" ng-maxlength="100" required />
<small class="error" ng-show="(editContactsForm.Name2.$error.required && editContactsForm.ContactTitle.$dirty) || (editContactsForm.Name2.$error.required && editContactsForm.Name2.$touched)">This is a required field.</small>
