javascript - 我正在尝试让表单验证与 Angular 向导一起使用

Question

我正在使用 Angular 向导来进行应用程序的注册过程。

Angular 向导 - https://github.com/mgonto/angular-wizard

但是，无论我尝试什么，向导的每个步骤都不允许进行表单验证(这基本上是通过 Angular 开箱即用的，并且使用带有 FormController 和 $error 对象的表单。

我已经在项目的问题页面上发布了有关表单验证的信息，但我还没有收到项目所有者或任何其他用户的来信，提供工作代码示例，因此我希望这里的一些更高级的用户可以提供帮助。

哦，为了帮助隔离问题，我只在我的 jsfiddles 中包含了第一步的 html。

验证问题 - https://github.com/mgonto/angular-wizard/issues/41

验证问题页面链接到我的 jsfiddles 和其他工作。

这是范围界定问题吗？？？如果是这样，我该如何解决它？目前，当我单击“下一步”按钮时，它只是通过向导进行，当我尝试将 $error 对象发送到控制台时，我得到的只是“未定义”。

Angular 文档(表单属性和对 $error 的引用)- https://docs.angularjs.org/api/ng/type/form.FormController

Answer 1

这绝对是一个范围界定问题。我能够通过进入子元素(在 Controller 中)的范围并将 View (html)中的变量定义为 $parent 元素的一部分来使事情正常工作。这意味着所有变量都在 HTML 中设置为

ng-model="$parent.variableName";

从 Controller 更改此变量的值需要进行如下调用:

$scope.$$childTail.variableName = 'something that you want to change the value to';

但是接触 $$childTail 是一个禁忌。如果您问我，整个项目需要重新设计以解决范围界定问题。如果修订后的项目使用典型 Angular 数据绑定(bind)之外的任何内容，则需要有关如何访问验证变量的文档。

我的解决方案代码附在下面的要点中。

Controller 设置 https://gist.github.com/Shawful/a4f8ff5097eabc5306f4

HTML 设置 https://gist.github.com/Shawful/f8dc97d6fd88bbb111f9