即使输入无效，AngularJS表单也会验证

Posted 2023-04-14

【中文标题】即使输入无效，AngularJS表单也会验证

【英文标题】：AngularJS Form validating even though input is invalid

【发布时间】：2014-05-14 17:27:31

【问题描述】：

我有一个表单，其中有一些不在表单标签内的必需输入。即使这些输入无效，表单仍在验证。

如何在不移动表单标签内的所有输入的情况下解决此问题？

特别是当与表单关联的任何输入无效时，我需要使表单无效。不仅仅是包含在元素中的那些。（即任何带有指向表单的表单属性的输入）

示例：

http://jsfiddle.net/v6QkB/

<div class="radio-group">
  <input type="radio" form="testForm" name="test2" value="a" ng-model="formData.test2" ng-required="true">
  <input type="radio" form="testForm" name="test2" value="b" ng-model="formData.test2" ng-required="true">
</div>
<form name="testForm">
  <div class="radio-group">
    <input type="radio" name="test1" value="a" ng-model="formData.test1" ng-required="true">
    <input type="radio" name="test1" value="b" ng-model="formData.test1" ng-required="true">
  </div>
  <input type="submit" value="submit" ng-disabled="testForm.$invalid">
</form>

【问题讨论】：

您需要详细说明您的约束条件。什么是选项，什么不是选项？

唯一的限制是我不能改变页面的布局。这意味着无线电输入必须保留在表单元素之外。

你知道 ng-form 吗？是否可以将所有内容（外部输入和表单）包装在 ngForm 中？

啊，好吧，我以为 ngForm 必须应用于表单元素。我现在看到这是不正确的。这应该通过将其应用于页面包装器来解决问题。谢谢

如果您将其添加为答案，我会继续并将其标记为正确。

【参考方案1】：

您可以使用ngForm 指令来包装所有元素（外部输入和表单）。

根据 the docs ngForm 是表单指令的一个 “嵌套别名。[...] 嵌套表单很有用，例如，如果子的有效性- 需要确定控制组。”

此外，“ngForm 的目的是对控件进行分组，而不是替代 <form> 标记的所有功能（例如，发布到服务器，...）”。

<div ng-form="outerForm">
    <div class="radio-group">
        ...
    </div>
    <form name="testForm">
        <div class="radio-group">
            ...
        </div>
        <input type="submit" value="submit" ng-disabled="outerForm.$invalid" />
    </form>
</div>