6

angularjs 1.5 中的嵌套表单存在验证问题，github 中存在关于它的问题。

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

但是他们俩都无法处理这种情况，并且不为我工作……至少！

让我们假设这个结构：

<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 依赖于嵌套表单验证，它不应该！

测试用例 1：

第 1 步：用任意文本和超过 5 个字符填写 input3。

预期：应启用 ButtonX1。

结果：ButtonX1 仍然被禁用。

测试用例 2：

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

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

预期：ButtonX2 应该启用。

结果：ButtonX2 已启用。

测试用例 3：

第 1 步：用任意文本和超过 5 个字符填写 input3。

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

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

预期：应启用 ButtonX1 和 ButtonX2。

结果：ButtonX1 和 ButtonX2 已启用。

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

4

2 回答 2

3

似乎唯一需要的是在父表单控制器上调用 $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;
于 2017-03-16T14:19:44.830 回答
2

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

<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>
于 2016-06-23T11:30:20.103 回答