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

前端之家收集整理的这篇文章主要介绍了angularjs – 验证嵌套表单而不影响父表单前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
angularjs 1.5中的嵌套表单中存在验证问题,并且存在 issue in github about it.

但是该主题中的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;博士:
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,但他们都遇到了这个问题.

我认为这是根据您的要求提供的解决方案.
<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>

猜你在找的Angularjs相关文章