提交表单超时后如何在页面上显示错误?

时间:2019-03-31 03:52:50

标签: angular typescript

我正在处理一个有角度的表单,该表单将数据提交给使用Spring Boot编写的后端REST服务。我需要添加一个功能,该功能在经过一定时间后如果提交数据失败,则会显示错误。当前,具有该表单的页面会永久加载,并且表单上不会显示任何错误。我想对Rxjs使用超时功能,但我不知道如何实现。

我针对特定表单提交的代码段如下:

this.apiService.afisEnroll(applicant).subscribe(data => {
  if (data.response_code == 210) {
    this.blockUI.stop();
    console.log(`applicant %s enrolled successfully`, applicant.pbuNo);
    var obj = JSON.stringify(this.applicants[this.applicants.length - 1]);
    if (obj == JSON.stringify(applicant)) {
      console.log("this is the last applicant");
      this.captureEnrollmentDetailsForCOMPAS();
    }
  }
  else {
    this.blockUI.stop();
    return this.toast.error("Applicant is already enrolled");
  }
},
  (err) => {
    console.error(err);
    this.blockUI.stop();
    return this.toast.error("error enrolling applicant");
  });

1 个答案:

答案 0 :(得分:0)

  

使变量布尔类型最初分配为false,例如   var codeExecute = false;   在

中完成所有工作
   setTimeout(function() {
    this.apiService.afisEnroll(applicant).subscribe(data => {
        if (data.response_code == 210) {
            codeExecute =true;  // addition code
             this.blockUI.stop();
            console.log(`applicant %s enrolled successfully`,applicant.pbuNo);
            if 
                (JSON.stringify(this.applicants[this.applicants.length - 1]) == 
                    JSON.stringify(applicant)) {
                    console.log("this is the last applicant");
                    this.captureEnrollmentDetailsForCOMPAS();
                }
                            //this.applicantenrolledsuccessfully = true;
                        }
                        else {
                            this.blockUI.stop();
                            return this.toast.error("Applicant is already enrolled");
                        }
                    }, (err) => {
                        console.error(err);
                        this.blockUI.stop();
                        return this.toast.error("error enrolling applicant");
                    });
}, 1000);
if(!codeExecute){
    codeExecute = true;
    return this.toast.error("Time out error Please try again");
}