1

我正在使用具有各种需要验证的字段的反应式表单。某些字段具有条件验证，只有在满足条件时才应检查。（即如果您对上述问题的回答是肯定的，请解释原因）

在最终看起来像这样的 HTML 中：

<input type="text" [required]="did_you_answer_yes_to_the_previous_question" />

这样，除非满足条件，否则反应式表单不会验证该字段。

然后我检查 valueChanges 上的表单有效性，如下所示：

    this.form.valueChanges
        .pipe(
            concatMap((updatedForm: any) => {
                if (this.form.dirty) {                      
                    this.service.udpateFormIsValid(this.form.valid);
                    this.form.markAsPristine();
                }

                return of(updatedForm);
            })
        )
        .subscribe((updatedForm: any) => {  });

但是，验证发生在角度绑定更新导致误报和否定之前。

.debounceTime(250)我可以通过在 observable 之后添加 a 来缓解竞争条件来轻松修复它valueChanges，但是添加手动延迟似乎是一种反模式。

有没有更好的方法来确保我们每次更新表单时都执行检查，但在 angular 更新布尔条件绑定之后执行检查？

4

2 回答 2

1

FormControl 有一个statusChangesObservable 你可以订阅。

所以代码可能看起来像这样：

        this.form.statusChanges
            .pipe(
                distinctUntilChanged()) // to reduce the noise
            .subscribe(() => {
                this.service.udpateFormIsValid(this.form.valid);
        });
于 2019-09-19T18:18:37.160 回答
1

您可以使用验证器来检查表单的有效性，即：

this.myForm = this.formBuilder.group({
      value1: ["", [Validators.maxLength(40)]], 
// etc...
});

然后您可以使用 statusChanges 订阅来检查表单是否有效。如果你想对这些值做其他事情，你可以在你做的时候订阅 valueChanges。为了避免 Observable 竞争，你只需要使用 RXJS 组合 observable：

combineLatest(this.myForm.valueChanges,this.myForm.statusChanges)
  .subscribe(([values, status])=>{
  // Do whatever you want with those values here
});

这样你就不需要做一些奇怪的事情，比如给其中一个电话添加延迟。

于 2021-08-20T09:13:00.130 回答