验证表单中使用嵌套NG​​-形式的标签嵌套、表单、形式、标签

2023-09-14 00:17:51 作者:泪在打转还能笑

我有被划分成片的形式。每个选项卡是 NG-形式即主格式元素的孩子。父窗体应该只能提交如果其他子窗体是有效的。但是,因为我使用纳克开关,它只检查当前选项卡是有效的。

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

是我的做法正确吗?应尽量纳克开关的替代或我可以在控制器内部所有的逻辑/服务?

BONUS

在父形式提交,就应该打开一个选项卡/ NG-形式,是无效的,以立即显示该用户的错误。 (例如,如果TAB1和TAB2是有效的,将跳转到TAB3并显示的错误。

解决方案

NG-开关不隐藏,它添加/删除元素,那场比赛,/从DOM的。这样DOM不会访问该删除字段以便验证不能为隐藏的元件工作。

您既可以通过检查处理控制器上的验证,如果你所有的型号都有值,也可以只显示/隐藏的元素,而不是添加/删除它们。

因此​​,删除 NG-开关,并使用 NG-秀=标签== 1 NG-秀=标签== 2 NG-形式元素。

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

I have a form that is divided into tabs. Each tab is an ng-form that is a children of the main form element. The parent form should only be able to submit if the other subforms are valid. However, because I am using ng-switch, it only checks if the current tab is valid.

Here is the fiddle http://jsfiddle.net/nicolasmoise/LRfrY/2/

Is my approach correct? Should try an alternative to ng-switch or can I have all that logic inside the controller/services?

BONUS

When the parent forms submits, it should open the first tab/ng-form that isn't valid in order to immediately show the user the error. (e.g. if tab1 and tab2 are valid it will jump to tab3 and show the error there.

解决方案

The ng-switch does not hide, it adds/removes elements, that match, to/from the DOM. This way the DOM does not have access to the removed fields so the validation cannot work for the hidden elements.

You could either handle the validation on the controller by checking if all your models have values, or you could just show/hide the elements instead of adding/removing them.

So, remove the ng-switch and use ng-show="tab==1" and ng-show="tab==2" on the ng-form elements.

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

 
精彩推荐
图片推荐