javascript - 如何避免子表单在 AngularJS 中使外部表单 $dirty ？

Question

AngularJS 中的表单有时会变得有点难看。这就是我的情况。我的结构看似简单，由三种形式组成。其中两个应该相互关联，而第三个应该完全独立。

<form name="foo">
   <div ng-repeat="f in foo.list">
      <custom-component ng-form="foo['f_'+$index+'_something']"></custom-component>
   </div>
</form>

以上是主窗体。它将自身的某些部分绑定(bind)到自定义组件。

另一方面，该组件内部有两种形式:

<div ng-form="$ctrl.form">
   <!--foo-->
</div>
<some-popup>
   <div ng-form="$ctrl.popupForm">
      <!--foo-->
   </div >
</some-popup>

问题是 popupForm 以某种方式自动与其他表单绑定(bind)。结果与预期相差甚远。当我修改 popupForm 时，它会使 foo 表单上的项目变脏。此外，如果 popupForm 上的某些字段不满足验证标准，并且弹出窗口关闭，则错误将传播到 foo 表单的项目。最新的问题可以通过 ng-if 指令来解决，该指令用于在隐藏弹出窗口时从 DOM 中“删除”popupForm，但这仍然不是完整的解决方案。

有没有办法使表单(示例中的popupForm)与其他表单完全分开？我可以以某种方式阻止嵌套表单吗？

Answer 1

问题比较复杂。正如之前提到的，HTML 标准不允许 <form>嵌套 - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form - 允许的内容。

如果您不打算交叉验证此<div ng-form="$ctrl.popupForm">与 <div ng-form="$ctrl.form">通常这应该通过 Attach/append popup 来完成元素执行不同的 DOM 元素。

例如angular-ui组件 Bootstrap Modal https://angular-ui.github.io/bootstrap/有名为 appendTo 的属性(property)。这应该可以解决 <form>如果您使用 Bootrstrap 或 Material Design 等模态，则会出现继承问题 http://mseemann.io/frontend/2016/10/10/angular-2-mdl-mdl-dialog-advanced-configuration.html .

更多hacky替代方案涉及创建自定义directive并使用 https://docs.angularjs.org/api/ng/service/ 附加元素$编译compile功能。 Angular directives - when and how to use compile, controller, pre-link and post-link

如果您计划进行交叉验证，则应使用 service 来解决此问题/provider用于通信和可测试性。