如何根据模式按钮的成功在特定时间禁用表单上的按钮？

Question

这是需要在模式成功响应时禁用的按钮的 component.html 代码：

<button title="Bypass Authentication" (click) = "opendobAuthModal(user.id)">Bypass Authentication</button>

以及定义函数的 component.ts 文件：

opendobAuthModal(userID: number){
    const modalRef = this.modalService.open(DobAuthModalComponent, { size: 'md' });
    modalRef.componentInstance.id = userID;
  }

这是模态的 component.html，上面的按钮应该被禁用：

<button type="submit" class="btn btn-primary btn-elevate" (click) = "checkDOB()" routerLink = "/customer-user-management" > Proceed </button>

和component.ts模态文件：

checkDOB(){
this.customerDetailService.updateDOB(this.id, this.customerDetailService.format(this.inputDOB)).subscribe(
      (res: any) =>{
        if(res.code == 200){
          this.toasterService.success(res.message);
          this.modalService.dismiss();

        }
      },
     (err: any) => {
        console.log(this.inputDOB);
        this.toasterService.error(err.error.message);
        this.modalService.dismiss();
     }
    )
  }

模态的 service.ts 文件：

updateDOB(customerId, date_of_birth){
    return this.http.put(this.checkDOBUrl + `/${customerId}`, {date_of_birth}, {headers: this.getHeader()}) 
  }

Answer 1

向按钮模板添加禁用属性：

<button title="Bypass Authentication" [disabled]="disableBypassAuth" (click) = "opendobAuthModal(user.id)">Bypass Authentication</button>

在组件 class 中，创建一个新变量 disableBypassAuth 并将其默认设置为 false。收到成功响应后将 varibale 更新为 true，如：

 (res: any) =>{
    if(res.code == 200){
      this.toasterService.success(res.message);
      this.modalService.dismiss();
      // emit an observable and catch it in the component class to set the disableBypassAuth to true
    }
  },

Answer 2

在模态的 .ts 文件中添加以下代码后它起作用了：

checkDOB(){
    this.customerDetailService.updateDOB(this.id, this.inputDOB).subscribe(
      (res:any) =>{
        if(res.code == 200){
          this.toasterService.success(res.message);
          this.modalService.dismiss();
          let disableBypassAuth = (document.getElementById(this.id) as HTMLInputElement);
          disableBypassAuth.disabled = true;
          setTimeout(function() {
            disableBypassAuth.disabled = false;
        }, 180000);
        }
      },
     (err: any) => {
        console.log(this.inputDOB);
        this.toasterService.error(err.error.message);
        this.modalService.dismiss();
     }
    )
  }

如何根据模式按钮的成功在特定时间禁用表单上的按钮？

How to disable button on form for a particular time based on success of modal button?

html

typescript

angular-services

angular