在提交中等待有效性检查的最佳方法是什么

Question

我有一个反应式形式，它对服务器API具有异步验证器。由于特殊情况，我需要在提交功能中重新验证表单。我目前正在为如何等待重新验证完成而苦苦挣扎。请指教。谢谢。

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

Answer 1

哇，我写过缺乏用 Angular 形式优雅地处理这个问题的能力。成功处理是每个人的责任

如果我们可以将自定义事件写入 FormGroup 的状态消息 可能性是无穷无尽的。但我们不能。

没有办法知道或使用任何类型的成功事件。一个存在，但从响应式形式的角度来看它不可用。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 示例并回发(

Answer 2

订阅状态更改，

this.myForm.statusChanges.pipe(skip(1)).subscribe(status => {
  if (status === 'VALID') send();
})