How to switch tabs on submit

[akshayinnopix]

I have a created a form with formbuilder which has 2 tabs.

On tab 1 when I enter all the form data and hit submit should switch to tab 2. Is there any event or method I could use to switch from tab1 to tab 2.

[travist]

This shows how to do that...

https://formio.github.io/formio.js/app/examples/customwizard.html

[akshayinnopix]

Thanks for your help, I forgot to mention that I am using form.io Angular demo and I am using form builder to generate a form and in my form I have 2 tabs. On submit of first tab I want to switch to my second tab. Is there an event or method to achieve the same .

[travist]

What I would do is create do something very similar to what you see in custom wizard (where you have a button that emits an event). Then in the controller, you just need to get the "tab" component and then you can switch tabs directly on that component like this.

Formio.createForm(document.getElementById('form'), 'https://examples.form.io/testform').then(function(form) {
  form.on('nextTab', function() {
    var tab = form.getComponent('tab');
    // Changes to the second tab.
    form.setTab(1);
  });
});

[akshayinnopix]

Hey @travist thanks for your help, is there a way to make the second tab active on form load. I tried the above method but it didn't work for me. so I tried this:

($(".nav.nav-tabs a[href='#second']")).tab('show'); I tried to use bootstrap method to show the tab. The tab gets switched but the content is not rendered or visible.

[akshayinnopix]

What I would do is create do something very similar to what you see in custom wizard (where you have a button that emits an event). Then in the controller, you just need to get the "tab" component and then you can switch tabs directly on that component like this.

Formio.createForm(document.getElementById('form'), 'https://examples.form.io/testform').then(function(form) {
  form.on('nextTab', function() {
    var tab = form.getComponent('tab');
    // Changes to the second tab.
    form.setTab(1);
  });
});

I cannot access the method Formio. Not sure if I need to import it. Also, I cannot access the get component method:

HTML:
<formio id="form" class="mt-3" (formLoad)="formLoad()" (submit)="onSubmit($event)" [form]="formSrc" (ready)="ready()"></formio>

TS:

formSrc : any;

//Function to get JSON
getFormDetails(){
   // On API data success I save it in 
      this.formSrc = JSON.parse(data["data"]["result"]["fields"]);
}

onSubmit(event){
// I make an API call and on success i want switch tab 1 --> tab2


}

Please could you help me out I am really stuck

[aiwebb]

Make sure you've imported it via:

import { Formio } from 'formiojs';

[zardilior]

How did you do the tabs?

[devpoinyram]

any update on yhis isue?

[devpoinyram]

@zardilior @akshayinnopix

[devpoinyram]

@travist how can we achieve an active tab based on conditions using angular formio?

[mubinahmed]

For anyone who is still looking for this, below is the solution that can be used within the button's custom action:

utils.eachComponent(instance.root.components, function(component) {
    if (component.key == 'tabs') {
        if (component.currentTab > 0) {
            component.currentTab = component.currentTab - 1;
            component.setTab(currentTab);
        }
    }
}, true);