AngularJS: How to show the next form field depending on validity of the previous one

Question

I need to display the next field in my form depending on the last value selected in the form. All fields in my form are independent views, specifically are ng-include.

The idea is not to show all fields when the page loads, and instead, show the next field according to the value selected in the previous field.

Example 1:

My first input (my first ng-include) is a text field, maybe on trigger onBlur check if the value is correct and then show the next field (my second ng-include), then, if that value is correct and then show the next field (my third ng-include).

Example 2:

This time my first input (my first ng-include) is a checkbox field, maybe on trigger onBlur check if the value is correct and then show the next field (my second ng-include), then, if that value is correct and then show the next field (my third ng-include).

Thanks.

Answer 1

You can wrap each field (or a group of fields) in ng-form and show the next section depending on the validity of the form of the current section. The fact that elements of the form are delivered via ng-include has little bearing on the approach:

<div ng-form="form1">
  <input ng-model="v.one" required min-length="3">
</div>

<div ng-form="form2" ng-show="form1.$valid && !form1.$pending">
  <input ng-model="v.two" required min-length="3">
</div>

<div ng-form="form3" ng-show="form2.$valid && !form2.$pending">
  <input ng-model="v.three" required>
</div>

This is, of course, at a high-level, and doesn't deal with cases where previous becomes invalid while the next form is showing. For those, more complicated, cases it is better to do the logic in the controller and expose the decision via a function or a scope variable, e.g. showForm2():

<div ng-form="form2" ng-show="showForm2()">
  <input ng-model="v.two" required min-length="3">
</div>

Answer 2

Are you familiar with ng-show?
- It shows or hide element depended on value which you declare in ng-show tag.