Question

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

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

具体来说，当与表单相关的任何输入无效时，我需要使表单无效。不仅仅是元素中包含的内容。（即任何带有它的表单属性指向表单的输入）

示例：

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

Answer 1

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

根据 the docs ngForm是form指令的＆＃34;可嵌套别名。 [...]嵌套表单很有用，例如，如果需要确定控件子组的有效性。＆＃34;

此外，＆＃34; ngForm的目的是对控件进行分组，但不能替代<form>标记及其所有功能（例如发布到服务器），...）＆＃34; 。

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

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

1 个答案: