基于 API 响应以 Angular 形式启用/禁用按钮

Question

我正在使用带有反应形式的 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) 响应中出现任何错误时将其重新启用。 如何实现这一目标？

Answer 1

你只需要在按钮的disabled属性中添加一个this.submitted ，看下面的代码

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

Answer 2

如果 API 正在进行中，您可以使用submitted将是 true，如果 API 解析或拒绝，则将变为 false。 现在你可以使用敲定操作者设置submitted虚假里面。 它将在 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>