Question

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

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

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

Answer 1

哇，我写了一篇关于缺乏用Angular表格优雅地处理它的能力的文章。 Success Handling is Everyone's Responsibility

如果我们可以将自定义事件写入FormGroup的statusMessages中，可能性是无止境的。但是我们不能。

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

在页面上有几种表单时，我将执行以下操作：

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

订阅statusChanges

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

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

2 个答案: