验证嵌套表单而不影响父表单
在angularjs 1.5的嵌套表单中存在验证问题，并且github中存在一个问题。
但该主题中的两个人提供了解决方案，其中一个人已经开放了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。
另一个问题是嵌套表单中的P标签在Input01无效时不显示。 我尝试了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>
它似乎唯一需要的是在父窗体控制器上调用$ removeControl。 这个非常简单的指令一直在为我工作。 适用于你的ng表单。
function isolateFormDirective () {
return {
restrict: 'A',
require: ['form', '^form'],
link: function(scope, element, attrs, forms) {
forms[1].$removeControl(forms[0]);
}
}
}
export default isolateFormDirective;
上一篇: validate nested forms without affecting the parent form