我在提交表单时遇到了一些问题

Question

我想在单击按钮时提交表单并导航到下一页，但显示错误："Form submission canceled because the form is not connected".

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

这是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(); }

Answer 1

您可以尝试以下方式 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>

Answer 2

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

在 onSubmit() 方法的末尾添加 this._router.navigateByUrl('/pathOfYourNextPage');，这样您就可以通过 .ts 文件进行重定向。

希望对您有所帮助！

我在提交表单时遇到了一些问题

I am facing some issues regarding the form submission

html

typescript

angular

ngx-admin

nebular