验证嵌套表单而不影响父表单

There is a validation problem in the nested forms in angularjs 1.5 and there is an issue in github about it.

angularjs 1.5中的嵌套表单中存在验证问题，github中存在一个问题。

but 2 people in that topic offer the solution and one of them has open its way to the angularjs core which is ngFormTopLevel directive, and the other one offered by a user called isolate-form.

但是该主题中的2个人提供了解决方案，其中一个人已经开始使用angularjs核心，这是ngFormTopLevel指令，另一个是由一个名为isolate-form的用户提供的。

but neither of them can handle this situation and not working for me ... at least !

但是他们都不能处理这种情况而且不能为我工作......至少！

lets assume this structure:

我们假设这个结构：

<ng-form name="X1" novalidate>

    <ng-form name="X2" novalidate isolate-form>

        <input name="Input01" ng-model="input1" required />
        <p ng-show="X2.Input01.$touched && X2.Input01.$invalid">input is not valid</p>

        <input name="Input02" ng-model="input2" required />

        <input type="button" id="ButtonX2" value="Submit Nested Form" ng-disabled="X2.$invalid" />

    </ng-form>

<input name="Input03" ng-model="input3" required ng-minlength="5" />

<input type="button" id="ButtonX1" value="Submit Nested Form" ng-disabled="X1.$invalid" />

</ng-form>

tl;dr : ButtonX1 is dependent on nested form validation and it shouldn't !

tl; dr：ButtonX1依赖于嵌套表单验证，它不应该！

Test case 1:

测试案例1：

Step 1: Fill input3 with any text and more than 5 character.

第1步：使用任何文本和超过5个字符填充input3。

Expected: ButtonX1 should be enable.

预期：应启用ButtonX1。

Result: ButtonX1 still disabled.

结果：ButtonX1仍然处于禁用状态。

Test case 2:

测试案例2：

Step 1: Fill input1 with any text.

第1步：使用任何文本填充input1。

Step 2: Fill input2 with any text.

第2步：使用任何文本填充input2。

Expected: ButtonX2 should be enable.

预期：应启用ButtonX2。

Result: ButtonX2 is enabled.

结果：ButtonX2已启用。

Test case 3:

测试案例3：

Step 1: Fill input3 with any text and more than 5 character.

第1步：使用任何文本和超过5个字符填充input3。

Step 2: Fill input1 with any text.

第2步：使用任何文本填充input1。

Step 2: Fill input2 with any text.

第2步：使用任何文本填充input2。

Expected: ButtonX1 and ButtonX2 should be enable.

预期：应启用ButtonX1和ButtonX2。

Result: ButtonX1 and ButtonX2 is enabled.

结果：ButtonX1和ButtonX2已启用。

and the other problem is the P tag inside the nested form does not show when the Input01 is invalid. I tried both the isolateForm and the ngFormTopLevel but both of them have this problem.

另一个问题是当Input01无效时，嵌套表单中的P标签不显示。我尝试了isolateForm和ngFormTopLevel，但他们都遇到了这个问题。

2 个解决方案

#1

I think this is the solution as per your requirement.

我认为这是根据您的要求提供的解决方案。

<ng-form name="X1" novalidate>

        <ng-form name="X2" novalidate isolate-form>

            <input name="Input01" ng-model="input1" required />
            <p ng-show="X2.Input01.$invalid && X2.Input01.$touched">input is not valid</p>

            <input name="Input02" ng-model="input2" required />

            <input type="button" id="ButtonX2" value="Submit Nested Form" ng-disabled="X2.$invalid" />

        </ng-form>

        <input name="Input03" ng-model="input3" required ng-minlength="5" />

        <input type="button" id="ButtonX1" value="Submit Nested Form" ng-disabled="X1.Input03.$invalid" />

    </ng-form>

#2

It would seem the only thing needed is to call $removeControl on the parent form controller. This very simple directive has been working for me. Apply to your ng-form.

似乎唯一需要的是在父窗体控制器上调用$ removeControl。这个非常简单的指令一直在为我工作。适用于您的ng-form。

function isolateFormDirective () {
    return {
        restrict: 'A',
        require: ['form', '^form'],
        link: function(scope, element, attrs, forms) {
            forms[1].$removeControl(forms[0]);
        }
    }
}

export default isolateFormDirective;

#1