Html 如何隔离嵌套表单？

我对AngularJS非常陌生，对客户端编程也很陌生

上下文：

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

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

它看起来像这样：

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

电话：

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

以及模板：

地址：

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

{{地址.地址}

{{地址.城市}

电话：

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

{{电话号码}}

{{phone.areaCode}

您可能已经注意到，在浏览器中生成的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>

{{电话号码}}

{{phone.areaCode}

{{地址.地址}

{{地址.城市}

问题：

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

我有两个

表单

，在

表单

中。嵌套表单工作正常，添加和验证它应该执行的值，并拒绝添加无效的电话/地址

但是，当我单击外部表单上的

submit

按钮时，它将解释内部表单输入字段，如果这些字段具有无效值，则会引发错误

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

这正是您想要的

基本要点是希望在表单标记中使用指令

<div ng-form="outerForm">
  <input type="text" ng-model="main.outerFormText"/>
  <div ng-form="innerForm">
    <input type="text" ng-model="main.innerFormText" required/>
    <button type="button" ng-click="main.submit('innerForm')"
      ng-disabled="innerForm.$invalid">Inner Submit</button>
  </div>
  <button type="button" ng-click="main.submit('outerForm')"
    ng-disabled="outerForm.$invalid">Outer Submit</button>
</div>

内部提交
外部提交

---

如果希望子窗体作为隔离窗体，则需要一个指令。看一看你的答案。请看附件中的小提琴。我把小提琴的链接放在这里，让你看到它的作用

仅仅因为这样，就把下面的代码放在下面不接受只有小提琴的链接

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

使用角度1.6

const isolatedFormDirective = () => {
    return {
        restrict: 'A',
        require: '?form',
        link: ($scope, $element, $attrs, ctrl) => {
            ctrl && ctrl.$$parentForm && ctrl.$$parentForm.$removeControl(ctrl);
        }
    }
}

app.directive('isolatedForm', isolatedFormDirective);

---

非常感谢。我来看看！如果我理解正确，

ngForm

将使我的外部表单检查内部表单的有效性。我想要的是完全忽略我的内部表单。如果我删除ng禁用属性，我仍然能够在内部表单提交，尽管存在必需的属性。这似乎是我想要的，但我的内部提交按钮不再工作。没有一个示例在内部表单上有提交按钮。当我单击内部提交时，它什么也不做，甚至在控制台上也没有错误。是的，我会在完成后立即更新我的问题。外部表单有效，内部表单无效，直到单击

内部提交

按钮时，外部表单才被提交，而不是预期的内部表单。不过，验证工作正常。