AngularJS: 如何根据前一个表单域的有效性显示下一个表单域

Question

我需要根据表单中最后选择的值显示表单中的下一个字段。我表单中的所有字段都是独立的视图，具体是 ng-include.

想法是在页面加载时不显示所有字段，而是根据上一个字段中选择的值显示下一个字段。

示例 1：

我的第一个输入（我的第一个 ng-include）是一个文本字段，可能会触发 onBlur 检查值是否正确，然后显示下一个字段（我的第二个 ng-include )，然后，如果该值正确，则显示下一个字段（我的第三个 ng-include）。

示例 2：

这次我的第一个输入（我的第一个ng-include）是一个复选框字段，也许在触发时onBlur检查值是否正确然后显示下一个字段（我的第二个ng-include)，然后，如果该值正确，则显示下一个字段（我的第三个 ng-include）。

谢谢。

Answer 1

你熟悉ng-show吗？
- 它显示或隐藏元素取决于您在 ng-show 标签中声明的值。

Answer 2

您可以将每个字段（或一组字段）包装在 ng-form 中，并根据当前部分表单的有效性显示下一部分。表单元素是通过 ng-include 传递的，这一事实与方法没有什么关系：

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

当然，这是高层次的，不处理在显示下一个表单时上一个变得无效的情况。对于那些更复杂的情况，最好在控制器中执行逻辑并通过函数或范围变量公开决策，例如showForm2():

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

AngularJS: 如何根据前一个表单域的有效性显示下一个表单域

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

forms

angularjs

angularjs-directive