根据 API 响应启用/禁用 Angular 表单中的按钮

Question

我正在使用具有 Reactive 形式的 Angular8。最初我会禁用“提交”按钮，直到整个表单都填满了有效数据。

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

在 class (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) 响应出现任何错误时重新启用它。如何实现？

Answer 1

只需要在button的disabled属性中添加一个this.submitted，见下面代码

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

Answer 2

您可以使用 submitted 如果 API 正在进行，则为真，如果 API 解决或拒绝，则为假。现在您可以使用 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>

根据 API 响应启用/禁用 Angular 表单中的按钮

Enable / Disable button in Angular Form based on API Response

form-submit

angular

angular-reactive-forms