html - 如何隔离嵌套形式？

Question

我是 AngularJS 的新手，也是客户端编程的新手。

上下文:

我正在实现一个支持多个电话号码和地址的联系表单。

看起来像这样:

<form name="contactInsertForm" ng-controller="contactInsertController as contactCtrlr" ng-submit="contactInsertForm.$valid && contactCtrlr.save()">
    <input type="text" name="name" />
    <phones-editor></phones-editor>
    <addresses-editor></addresses-editor>
    <input type="submit" />
</form>

phonesEditor 和 addressesEditor 是自定义的 Angular 指令，它们实现了对添加、删除和编辑电话和地址的支持。 Controller 和模块如下所示:

地址:

(function () {
    var app = angular.module("AddressesEditorModule", []);
    app.directive("addressesEditor", function () {
        return {
            restrict: "E",
            templateUrl: "/addressesEditorTemplate.html",
            controller: function ($scope) {
                this.addresses = [
                    // this will hold addresses.
                ];

                // ...
            }
        }
})();

电话:

(function () {
    var app = angular.module("PhonesEditorModule", []);
    app.directive("phonesEditor", function () {
        return {
            restrict: "E",
            templateUrl: "/phonesEditorTemplate.html",
            controller: function ($scope) {
                this.phones = [
                    // this will hold phones.
                ];

                // ...
            }
        }
})();

和模板:

地址:

<!-- list already added addresses -->
<div ng-repeat="address in addressesEditorCtrlr.addresses">
    <p>{{address.address}}</p>
    <p>{{address.city}}</p>
</div>
<form name="addressInsertForm" ng-submit="addressInsertForm.$valid && addressesEditorCtrlr.add()">
    <!-- inputs for each of the address fields -->
    <input type="submit" value="Add" />
</form>

电话:

<!-- list already added phones -->
<div ng-repeat="phone in phonesEditorCtrlr.addresses">
    <p>{{phone.number}}</p>
    <p>{{phone.areaCode}}</p>
</div>
<form name="phoneInsertForm" ng-submit="phoneInsertForm.$valid && phonesEditorCtrlr.add()">
    <!-- inputs for each of the phone fields -->
    <input type="submit" value="Add" />
</form>

您可能已经注意到，在浏览器中生成的 HTML 如下所示:

<form>
    <input type="text" name="name" />
    <phones-editor>
        <!-- list already added phones -->
        <div ng-repeat="phone in phonesEditorCtrlr.addresses">
            <p>{{phone.number}}</p>
            <p>{{phone.areaCode}}</p>
        </div>
        <form name="phoneInsertForm" ng-submit="phoneInsertForm.$valid && phonesEditorCtrlr.add()">
            <!-- inputs for each of the phone fields -->
            <input type="submit" value="Add" />
        </form>
    </phones-editor>
    <addresses-editor>
        <!-- list already added addresses -->
        <div ng-repeat="address in addressesEditorCtrlr.addresses">
            <p>{{address.address}}</p>
            <p>{{address.city}}</p>
        </div>
        <form name="addressInsertForm" ng-submit="addressInsertForm.$valid && addressesEditorCtrlr.add()">
            <!-- inputs for each of the address fields -->
            <input type="submit" value="Add" />
        </form>
    </addresses-editor>
</form>

问题:

我在一个 form 中有两个 form。嵌套表单可以正常工作，添加和验证它应该做的值，并拒绝添加无效的电话/地址。

但是当我点击外部表单的 submit 按钮时，它会解释内部表单的输入字段，如果这些字段的值无效，则会引发错误。

如何使用 AngularJS 表单处理并避免这种情况？这可能吗？

Answer 1

如果您希望子窗体作为隔离窗体，则需要一个指令。查看来自 this SO question 的答案.请查看 this answer 中附带的 fiddle .我把 fiddle 链接放在这里给你 js-fiddle看看它的实际效果。

把代码放在下面只是因为 SO 不只接受 fiddle 链接...

<form name="parent">
    <input type="text" ng-model="outside"/>
    <ng-form name="subform" isolate-form>
        <input type="text" ng-model="inside"/>
    </ng-form>
</form>