时间戳

首页 > 解决方案 > 基于 API 响应的 Angular 表单中的启用/禁用按钮

angular - 基于 API 响应的 Angular 表单中的启用/禁用按钮

问题描述

我正在使用带有反应形式的 Angular8。最初，我禁用提交按钮，直到整个表单都填充了有效数据。

<div>
  <form>
     ...........
  </for>
  <button [disabled]="(checkifSaveEnabled() && !formCreateNewPlan.valid)" 
       (click)="createNewPlan()">Save</button>
</div>

在类（TS）文件中：

checkifSaveEnabled() {
  if (this.formCreateNewPlan.pristine || !this.formCreateNewPlan.valid) {
    return true;
  }
  return false;
}

createNewPlan(): void {
   this.submitted = true;
   this.myservice.create(this.formCreateNewPlan.value).subscribe(result => {
   if (result.success && result.data.planId > 0) {
      ... 
   }
}

这里一切正常。但是，如果我从服务 (API) 响应中收到任何错误，我想禁用提交时按钮（以避免多次单击）并使其重新启用。如何做到这一点？

标签： angularangular-reactive-formsform-submit

解决方案

submitted如果 API 正在进行中，您可以使用它将为 true，如果 API 解析或拒绝，则将变为 false。现在您可以在其中使用 finalize 运算符将其设置submitted为 false。它将在 observable 的成功或错误块之后执行。

createNewPlan(): void {
   this.submitted = true;
   this.myservice.create(this.formCreateNewPlan.value)
.pipe(finalize(() => { this.submitted = false; }))
.subscribe(result => {
   if (result.success && result.data.planId > 0) {
   }

}, (error) => {
  console.log(error)
});

模板的相应变化

<button [disabled]="submitted || (checkifSaveEnabled() && !formCreateNewPlan.valid)" 
       (click)="createNewPlan()">Save</button>

推荐阅读