CODEWITHSUNDEEP
angular6
VinoCoder
VinoCoder

Reputation: 1153

How to change tab manually in Angular 6?

I have registration form in my application. In that form I'm using two tabs one is for personal details form and another one is for OTP verification form.

After completed filling personal details form, they have to click next, the values of personal details form should be stored in db through API call after that the verification tab have to open. In this case I don't know how to change tab (OTP verification form) when next button click.

I'm using ng-bootstrap tabsets. And I'm completely new to Angular. mThis is an Angular 6 application.

This is my Register function (after clicking next):

onRegister(User: any) {
    this.spinner.show();
    if (User.user_doctor === true) {
        this.registerService.register(User)
        .subscribe((value) => {
          this.spinner.hide();
           **I want that tab changing code here**
        }, err => {
          this.spinner.hide();
          if (err.status_code === 422) {
          
          } else {
            console.log('Error => ', err.message);
          }
});
      setTimeout(resposne => {
        this.spinner.hide();
      }, 300);
    }
}

This is my html code:

<ngb-tabset [justify]="currentJustify" id="register" (tabChange)="beforeChange($event)">
    <ngb-tab title="personal details" id="tab-preventchange1" class="nav-no-bottom">
        <ng-template ngbTabContent>
            <p>personal Details form</p>
        </ng-template>
    </ngb-tab>
    <ngb-tab title="contact details" id="tab-preventchange2">
         <ng-template ngbTabContent>
              <p>otp verification form</p>
         </ng-template>
    </ngb-tab>
 </ngb-tabset>

Upvotes: 0

Views: 629

Answers (2)

karthik
karthik

Reputation: 1

beforeChange($event: NgbTabChangeEvent) {
  //change this line in your code vinothini
  if (!this.isRegistered && $event.nextId === "tab-preventchange2") {
    $event.preventDefault();
  }
}

Upvotes: 0

karthik
karthik

Reputation: 1

onRegister(User: any) { debugger this.spinner.show(); console.log(User);

    if (User.user_doctor === true) {
        this.registerService.register(User)
        .subscribe((value) => {
          this.spinner.hide();
          //check out this line vinothini. 
          this.isRegistered = true;
          this.showPersonalDetails();
        }, err => {
          this.spinner.hide();
          if (err.status_code === 422) {
          } else {
            console.log('Error => ', err.message);
          }
});
      setTimeout(resposne => {
        this.spinner.hide();
      }, 300);
    }
}

Upvotes: 0

Related Questions