Leveraging ng-switch in conjunction with ng-disabled

Question

Leveraging ng-switch in conjunction with ng-disabled

I recently set up a page with 3 tabs using ng-switch, each tab containing a Save button with an ng-disabled attribute within the same form.

        <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>

The issue I'm encountering is that ng-disabled only performs validation on the currently active tab. It seems like this happens because when using ng-switch, it actually removes the inactive tab from the DOM instead of simply hiding it. Should I look for a workaround with ng-switch or switch back to using ng-hide and ng-show?

javascript angularjs angularjs-directive

Answer 1

Answer №1

One possible solution is to manually perform your validation process. Assuming your forms are connected to a specific model, you can create a custom validate function that directly monitors the changes in the model. The ng-disabled attribute might look something like this:

<button
    type="button"
    ng-click="save(data)"
    ng-disabled="form.$invalid || form.$pristine || myCustomValidation(data)">
    Save
</button>

This is currently the only alternative approach I can suggest instead of using ng-hide/ng-show.

Answer 2

One possible solution is to manually perform your validation process. Assuming your forms are connected to a specific model, you can create a custom validate function that directly monitors the changes in the model. The ng-disabled attribute might look something like this:

<button
    type="button"
    ng-click="save(data)"
    ng-disabled="form.$invalid || form.$pristine || myCustomValidation(data)">
    Save
</button>

This is currently the only alternative approach I can suggest instead of using ng-hide/ng-show.

Leveraging ng-switch in conjunction with ng-disabled

Answer №1

Similar questions

Elusive shadow fails to appear in ThreeJS scene

Create an additional column in HTML using Bootstrap styling

Overtaking a property in a node_module interface: a guide

Is it acceptable to initiate an import with a forward slash when importing from the root directory in Next.js?

Exploring json data with angularjs

Preventing data binding for a specific variable in Angular 2: Tips and tricks

The partial template is not functioning as anticipated

Personalized map pin styling

when webpack loads the bundle.js file, the mime type is converted to text/html

Is there a way to invoke a function using a variable in place of its actual name?

How can I simultaneously add two elements to a single node or to a node that does not exist in the JSON file?

Move the cursor to the end of the text when the key is released

Invisible ReCaptcha by Google not living up to its invisible name

In VuePress 1.x, the functionality of using the <Content> tag with pageKey is not functioning as expected

The timing of the RequestAnimationFrame function varies based on the dimensions of my canvas

Retrieve the HTML value of the most recently deleted element in CKEDITOR

Toggle the checkbox according to the boolean value in Postgres database

What are the available search options in the MarkLogic Search API to limit keyword searches from including specified values within JSON properties?

Struggling to make a form submit work with AngularJS and a Bootstrap datetime picker

Pressing a button will reset the input spinner in Bootstrap