-2

我想在单击按钮时提交表单并导航到下一页,但它显示错误:“表单提交已取消,因为表单未连接”

谁能帮我解决这个问题??我正在使用星云。

这是html代码

            <nb-step [label]="labelOne" [stepControl]="formOne">
        <ng-template #labelOne>Device type</ng-template>
        <form class="form-inline" #formOne="ngForm" >

            // Code goes here...

            <div class="buttonHolder">
                <button nbButton routerLink="/dashboard" nbStepperNext>Cancel</button>
                <button nbButton outline status="primary" (ngSubmit)="onSubmit(formOne)" 
                  nbStepperNext [disabled]="!formOne.valid">Next</button>
            </div>
        </form>
    </nb-step>`

这是 .ts 代码

    onSubmit(form: NgForm) { console.log(form.value); form.reset(); }
4

2 回答 2

1

要在提交表单后更改页面,请尝试将其导入Router并注册constructor(private _router: Router)到您的 .ts 文件中。

onSubmit()方法添加结束时,this._router.navigateByUrl('/pathOfYourNextPage');您将通过 .ts 文件进行重定向。

希望这会有所帮助!

于 2020-02-28T10:35:35.500 回答
0

您可以尝试以下方式 ts 文件

 onSubmit(formOne: NgForm) { 
   console.log(formOne.value); 
   this._router.navigate(['/navigation page link']); // navigation url link 
   formOne.reset(); 
 }

constructor(){
  private _router: Router,
}

HTML 文件

<nb-step [label]="labelOne" [stepControl]="formOne">
    <ng-template #labelOne>Device type</ng-template>
    <form class="form-inline" #formOne="ngForm"  (ngSubmit)="onSubmit(formOne)" >

        // Code goes here...

        <div class="buttonHolder">
            <button nbButton routerLink="/dashboard" nbStepperNext>Cancel</button>
            <button nbButton type= "submit" outline status="primary"  
              nbStepperNext [disabled]="!formOne.valid">Next</button>
        </div>
    </form>
于 2020-02-28T10:10:46.780 回答