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;博士: 测试案例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标签不显示.
我认为这是根据您的要求提供的解决方案.
<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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |