I implemented a page with 3 tabs using ng-switch, which has only one common Save button with ng-disabled attribute, all in one form.
我使用ng-switch实现了一个包含3个选项卡的页面,它只有一个带有ng-disabled属性的常用Save按钮,所有这些都在一个表单中。
<div id="tab1" ng-switch-default="basic">
<div id="tab2" ng-switch-when="contact">
<div id="tab3" ng-switch-when="password">
<button class="btn btn-info" type="button" ng-click="save(entity)" ng-disabled="form.$invalid || form.$pristine">
Save
</button>
Problem is ng-disabled performs validation only on the tab which is active, I thinkits because ng-switch removes the inactive tab from dom instead of just I hiding it. Is there a workaround for ng-switch or should I go back to ng-hide and ng-show?
问题是ng-disabled仅在激活的选项卡上执行验证,我认为因为ng-switch从dom中删除了非活动选项卡而不是我隐藏它。是否有针对ng-switch的解决方法,还是应该返回ng-hide和ng-show?
1 个解决方案
#1
2
The only workaround I see is to do your validation manually. I suppose your forms are binded to some model, so you can have your custom validate-function watching directly the model. The ng-disabled could be something like:
我看到的唯一解决方法是手动进行验证。我认为您的表单绑定到某个模型,因此您可以让您的自定义验证功能直接观察模型。 ng-disabled可能类似于:
<button
type="button"
ng-click="save(entity)"
ng-disabled="form.$invalid || form.$pristine || myCustomValidate(entity)">
Save
</button>
That's the only alternative to ng-hide/ng-show I can think of (right now at least).
这是我能想到的ng-hide / ng-show的唯一替代品(至少现在)。
#1
2
The only workaround I see is to do your validation manually. I suppose your forms are binded to some model, so you can have your custom validate-function watching directly the model. The ng-disabled could be something like:
我看到的唯一解决方法是手动进行验证。我认为您的表单绑定到某个模型,因此您可以让您的自定义验证功能直接观察模型。 ng-disabled可能类似于:
<button
type="button"
ng-click="save(entity)"
ng-disabled="form.$invalid || form.$pristine || myCustomValidate(entity)">
Save
</button>
That's the only alternative to ng-hide/ng-show I can think of (right now at least).
这是我能想到的ng-hide / ng-show的唯一替代品(至少现在)。