使用嵌套的ng-forms在带有选项卡的表单中进行验证

时间:2014-01-30 22:21:21

标签: angularjs validation angularjs-ng-form

我有一个分为标签的表单。每个标签都是ng-form,它是主form元素的子元素。如果其他子表单有效,则父表单应该只能提交。但是,因为我使用ng-switch,它只检查当前选项卡是否有效。

这是小提琴http://jsfiddle.net/nicolasmoise/LRfrY/2/

我的方法是否正确?应该尝试使用ng-switch的替代方案,还是可以在控制器/服务中使用所有逻辑?

奖金

当父表单提交时,它应该打开第一个无效的tab / ng-form,以便立即向用户显示错误。 (例如,如果tab1和tab2有效,它将跳转到tab3并在那里显示错误。

1 个答案:

答案 0 :(得分:1)

ng-switch没有隐藏,它添加/删除与DOM匹配的元素。这样,DOM就无法访问已删除的字段,因此验证无法用于隐藏元素。

您可以通过检查所有模型是否具有值来处理控制器上的验证,或者您可以只显示/隐藏元素而不是添加/删除元素。

因此,请移除ng-switch并在ng-show="tab==1"元素上使用ng-show="tab==2"ng-form

http://jsfiddle.net/gaby/LRfrY/4/

演示