时间戳

首页 > 解决方案 > 在 onSubmit 中等待有效性检查的最佳方法是什么

angular - 在 onSubmit 中等待有效性检查的最佳方法是什么

问题描述

我有一个反应式表单，它具有服务器 API 的异步验证器。由于特殊情况，我需要在提交函数中重新验证表单。我目前正在努力等待重新验证完成。请指教。谢谢。

onSubmit() {
  this.myForm.updateValueAndValidity();

  someObservable() // what to put here?
  .subscribe((stillValid: boolean) => {
    if (stillValid) send();
  }
}

标签： angularngrx

解决方案

哇，我写了关于 Angular 表单无法优雅地处理这个问题的文章。 成功经营人人有责

如果我们可以将自定义事件写入 FormGroup 的 statusMessages，那么可能性是无穷无尽的。但我们不能。

没有办法知道或使用任何类型的成功事件。一个存在，但从反应形式的角度来看它不可用。Angular 团队知道这一点。

当我在一个页面上有多个表单时，我会这样做：

public onSubmit(subject: string, index: number) {
    if (!this.form.valid) { return; } // validity check
    this.formSuccess(index);
}

public formSuccess(index): void {
    this.success[index] = false;
    if (this.success[index] === false) {
        this.success[index] = true;
        setTimeout(() => {
            this.success[index] = false;
        }, 2000);
    }
}

视图：.submitted.success淡入 5 秒后淡出。

<div class="submitted" [ngClass]="{'success': success}">
    Thanks for submitting!
</div>

（我将制作一个简单的 StackBlitz 示例并回发）

推荐阅读