问题标签 [angularjs-ng-form]

我有一个包含 5 个步骤的多步骤表单。我希望用户能够使用回车键提交每个子表单以触发验证并在成功时移动到下一个子表单。我找不到办法做到这一点。我在想也许我可以将ng-keydown事件添加到每个子表单（或绑定到的自定义指令onkeydown）并注意 enter 键keyCode。

有没有人有让这个在 Angular 中工作的经验？您将如何添加此功能？

这是子表单的简短 HTML 示例。假设“下一步”按钮$scope.nextStep()在角度控制器内触发，随后执行验证以确定用户是否可以移动到下一步或是否显示验证错误。

对于那些阅读并寻找答案的更多信息的人

我在控制器的$scope.current_step. 使用它，我可以用来$scope[$scope.current_step]引用当前表单。使用下面@Vova 接受的答案，我会做类似于以下的事情：

当您为表单命名时，会为您创建 ngFormController。

<form name="accountForm">将创建 $scope.accountForm 这允许您执行以下操作$scope.accountForm.$setPristine()

但是，在我的控制器中，测试accountForm是未定义的，因为我认为它是在解析模板后创建的，而且我不确定在测试控制器时是否考虑过模板。我怎样才能在测试中模拟这个？

我需要一种方法来遍历 AngularJS 表单的注册控件。本质上，我正在尝试获取所有 $dirty 控件，但没有控件数组（FormController 除了包含控件本身之外，还有许多不同的属性/功能 - 每个都是它自己的对象）。

我一直在查看源代码，发现controlsFormController 中有一个数组，正是我要查找的数组。有没有办法访问这个值，或者扩展 FormController 以包含一个返回这个controls数组的函数？

编辑：Plnkr演示

此外，我意识到从技术上讲，我可以检查密钥字符串中的第一个字符是否为“$”，但我想避免这种情况，以防 FormController/directive 在未来版本的 Angular 中发生变化。

编辑2：另一个澄清：我的目标是能够确定哪些特定字段是$dirty，是否通过循环遍历整个控件列表（不包括$dirty、$invalid、$error、$name、和其他存在于 Form 对象中的属性）或通过扩展 FormController 并创建一个函数，该函数仅返回当前脏的控件（并且不等于它们的起始值）

编辑3：我正在寻找的解决方案需要适用于不同结构的表单/模型。示波器上的模型是通过 AJAX 生成的，因此它们的结构已经设置好（我想避免为我已经通过 AJAX 接收的所有数据硬编码一个新结构）。此外，我希望在多个表单/模型中使用此表单提交过程，它们中的每一个都有不同的 JSON 结构——因为它们适用于我们对象模型中的不同实体。这就是为什么我选择寻求一种方法来访问controlsFormController 中的对象（我将从FormController下面发布代码），因为它是唯一可以获得所有字段的平面数组的地方。

如您所见，表单本身具有controls私有可用的数组。我想知道是否有办法让我扩展，FormController以便我可以公开该对象？或者创建一个公共函数，以便我至少可以查看私有数组？

我有一个下拉列表，可以动态生成任意数量的文本输入，所有这些输入都有不同的验证规则（最小/最大长度、模式等）。根据其他几个stackoverflow问题，即。（如何验证使用 ng-repeat、ng-show (angular) 动态创建的输入）使用 ng-form 模块可以让您创建具有动态验证的动态表单元素。

我已经这样做了，但问题是当基于下拉列表中的选择更改文本字段的数量时，验证规则不会相应更新。例如，第一个下拉选项将生成 1 个最小长度为 3 的文本输入。第二个选项也可能生成 1 个文本输入，但它的最小长度将为 1。即使最小长度规则为 1，角度最终也会验证最小长度3，来自原始选择的文本字段。

我的问题是，在不创建某种自定义指令的情况下，这是否可能在角度上实现？另一种解决方案是预先为每个下拉选择输出所有可能的文本元素，并使用基于下拉选择的 ng-show 来显示/隐藏每个集合。但我想保持模板干净并使用 ng-repeat 来动态生成它们，就像我现在一样。

我已经建立了一个最小的例子：

请在此处查看 html 和完整示例：http: //jsfiddle.net/anpsince83/kBVR2/

好的，所以我正在创建一个像这样的表单：

这适用于验证，即 mainForm.$invalid 仅在输入有文本后突出显示启用按钮。但是，使用batarang，我注意到范围看起来像这样：

因此它基于名称和声明的 ng-model 创建模型值。如果我将它们更改为相同，如下所示：

提交显示了正确的范围：

但是输入字段最初在输入中显示为 [Object object]，这让我觉得我在这里混淆了一些东西......我不能在所有输入字段中都有它。

我希望名称和型号相同。这似乎是渐进式增强方式，只需删除 ng-submit 方法即可允许正常的非 ajax 发布，而 ajax 方式如下所示：

任何人都可以洞察我所缺少的东西，或者如果我的架构从头开始就有缺陷，我会很感激你的智慧......

I'm still quite new to AngularJS and I think I'm having trouble understanding the timing with $scope. In a controller, I've setup a watcher for some model data that is bound to various form elements. The watcher fires off an ajax request when the data changes, except if the form is not valid. I'm checking the form validity with myForm.$valid. This is all pretty straight forward, however, except when the model data is updated in the controller, and not the form. The validations runs as expected, but form.$valid still has the previous value, not what it should be with the updated data. For example, if the form was previously valid, then I delete the model value bound to a required input, the watcher will fire because the model data has changed, but when I log the value of myForm.$valid it's value is still true, even though it should be false.

So my question is A. why is this happening?, but more importantly B. what is the correct way to handle what I am trying to accomplish? Would a custom directive make sense?

Here is a simplified example.

HTML:

Controller:

Fiddle: http://jsfiddle.net/anpsince83/cK6cc/1/

在收到回调之前，如何防止在 Angular 中提交表单？

我有这些方面的东西：

在提交表单之前，我需要{{bar}}从本地 API 调用中获取值（使用$http），并将其放在范围内，然后才允许提交实际表单（而不是使用 POST 发布$http）。如何才能做到这一点？

我有一个分为标签的表格。每个选项卡都是ng-form主元素的子form元素。只有在其他子表单有效时，父表单才能提交。但是，因为我使用的是 ng-switch，所以它只检查当前选项卡是否有效。

这是小提琴http://jsfiddle.net/nicolasmoise/LRfrY/2/

我的方法正确吗？应该尝试替代 ng-switch 还是我可以在控制器/服务中拥有所有逻辑？

奖金

当父表单提交时，它应该打开第一个无效的 tab/ng-form 以便立即向用户显示错误。（例如，如果 tab1 和 tab2 有效，它将跳转到 tab3 并在那里显示错误。

我有一个具有以下模板的指令 barFoo：

该指令在表单中使用！现在，在这个指令中，我想做类似的事情

但是，这不起作用。此外，输入字段没有名称属性。如果没有“名称”属性，有什么方法可以做到这一点？

更新：另一种解决方案是在指令元素上定义 ngModel

并将指令改写如下

我一直在玩这个，无法让它工作。required我正在创建一个角度表单，当属性添加到文本字段时，我能够使验证工作。file但是，如果添加了带有属性的输入类型required，我注意到显示了$error.required文本，但即使选择了文件，它也不会验证。即使添加了文件，它仍然显示为无效。我在 jsfiddle 中创建了一个示例，因此您可以查看：http: //jsfiddle.net/Alien_time/kxSaz/6/

验证不适用于文件输入吗？使用文件选择时如何添加必需的选项并对其进行验证？