Question

我的申请表中有注册表。在该表单中，即时消息使用两个标签，一个用于个人详细信息表单，另一个用于otp验证表单。

填写完个人详细信息表格后，他们必须单击下一步，在打开验证选项卡之后，应通过api调用将个人详细信息表格的值存储在db中。在这种情况下，单击下一步按钮时，我不知道如何更改选项卡（otp验证表单）。

我使用ng-bootstrap标签集。对于角度6或角度6来说是全新的。这是角度6的应用。请帮助我。

这是我的注册功能（单击下一步之后）：

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);
    }
}

这是我的html代码：

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

Answer 1

onRegister（用户：任意）{ 调试器 this.spinner.show（）; console.log（用户）;

    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);
    }
}

Answer 2

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

如何在角度6中手动更改选项卡？

2 个答案: