响应式 Angular 表单等待异步验证器在提交时完成

Question

我正在构建一个反应式角度表单，我正在尝试找到一种方法来触发所有验证器提交。如果验证器是同步器，那没关系，因为我可以内联获取它的状态。否则，如果验证器是异步验证器并且尚未触发，则ngSubmit 方法上的表单将处于待处理状态。我尝试注册订阅表单statusChange 属性，但是当我使用markAsTouched 函数手动调用验证时它没有被触发。

这里有一些sn-ps：

   //initialization of form and watching for statusChanges
   ngOnInit() {
        this.ctrlForm = new FormGroup({
            'nome': new FormControl('', Validators.required),
            'razao_social': new FormControl('', [], CustomValidators.uniqueName),
            'cnpj': new FormControl('', CustomValidators.cnpj),
        });

        this.ctrlForm.statusChanges.subscribe(
            x => console.log('Observer got a next value: ' + x),
            err => console.error('Observer got an error: ' + err),
            () => console.log('Observer got a complete notification')
        )
    }
    //called on ngSubmit
    register(ctrlForm: NgForm) {
            Forms.validateAllFormFields(this.ctrlForm);
            console.log(ctrlForm.pending); 
            //above will be true if the async validator
            //CustomValidators.uniqueName was not called during form fill.
    }
    //iterates on controls and call markAsTouched for validation,
    //which doesn't fire statusChanges
    validateAllFormFields(formGroup: FormGroup) {         
          Object.keys(formGroup.controls).forEach(field => {  
              const control = formGroup.get(field);             
              if (control instanceof FormControl) {             
                control.markAsTouched({ onlySelf: true });
              } else if (control instanceof FormGroup) {        
                this.validateAllFormFields(control);            
              }
          });
      }

关于如何确保异步验证器已执行，以便我可以继续使用所有验证器触发并完成的寄存器逻辑的任何想法？

Answer 1

使用 formGroup.statusChanges 等待 asyncValidators 完成，然后再继续提交表单。如果 asyncValidators 没有错误，继续提交。另一方面，如果失败，请不要提交。您的表单应该已经处理了失败的验证器。如果不再需要，记得取消订阅。

 if (this.formGroup.pending) {
      let sub = this.formGroup.statusChanges.subscribe((res) => {
        if (this.formGroup.valid) {
          this.submit();
        }
        sub.unsubscribe();
      });
    } else {
      this.submit();
    }

Answer 2

在这个问题中，还有一个解决方案作为指令实现，角度为https://github.com/angular/angular/issues/31021

Answer 3

我刚刚在我的应用程序中实现了一个版本，它手动调用每个控件的同步和异步验证器并返回一个布尔值，指示是否所有验证都通过了：

checkIfFormPassesValidation(formGroup: FormGroup) {
    const syncValidationErrors = Object.keys(formGroup.controls).map(c => {
      const control = formGroup.controls[c];
      return !control.validator ? null : control.validator(control);
    }).filter(errors => !!errors);
    return combineLatest(Object.keys(formGroup.controls).map(c => {
      const control = formGroup.controls[c];
      return !control.asyncValidator ? of(null) : control.asyncValidator(control)
    })).pipe(
      map(asyncValidationErrors => {
        const hasErrors = [...syncValidationErrors, ...asyncValidationErrors.filter(errors => !!errors)].length;
        if (hasErrors) { // ensure errors display in UI...
          Object.keys(formGroup.controls).forEach(key => {
            formGroup.controls[key].markAsTouched();
            formGroup.controls[key].updateValueAndValidity();
          })
        }
        return !hasErrors;
      })).toPromise();
  }

用法：

onSubmitForm() {
  checkIfFormPassesValidation(this.formGroup)
    .then(valid => {
      if (valid) {
        // proceed
      }
    });
}

Answer 4

如果我得到一个 form（反应式表单），类为 FormGroup，我会使用 AbstractControl/Property/valid 来检查表单是否有效，然后再继续将其发送到服务器。

我使用的异步验证器必须在更改表单字段后返回=> Promise<ValidationErrors | null> 在表单再次生效之前。 如果 Google 不这样设计它会很奇怪......但他们做到了！

Reactive Form Validation

Answer 5

Angular 在触发 ngSubmit 之前不会等待异步验证器完成。因此，如果验证器尚未解析，则表单可能无效。

使用Subject 发出表单提交，您可以将switchMap 发送到form.statusChange 和filter 的结果。

以startWith 开头，以确保在提交时表单有效的情况下没有悬挂发射。

过滤PENDING 等待此状态更改，take(1) 确保流在挂起后的第一次发射时完成：VALID 或 INVALID。

//
// <form (ngSubmit)="formSubmitSubject$.next()">

this.formSubmitSubject$ = new Subject();

this.formSubmitSubject$
  .pipe(
    tap(() => this.form.markAsDirty()),
    switchMap(() =>
      this.form.statusChanges.pipe(
        startWith(this.form.status),
        filter(status => status !== 'PENDING'),
        take(1)
      )
    ),
    filter(status => status === 'VALID')
  )
  .subscribe(validationSuccessful => this.submitForm());

您还可以添加一个tap 来触发将表单设置为脏的副作用。

Answer 6

markAsTouched 不会触发验证，请改用markAsDirty，然后您的自定义验证器将触发。所以改变...

control.markAsTouched({ onlySelf: true });

到

 control.markAsDirty({ onlySelf: true });

此外，如果您使用的是 v 5，您可以使用可选的 updateOn: 'submit'，它在提交表单之前不会更新值（因此不会更新验证）。为此，请进行以下更改：

this.ctrlForm = new FormGroup({
  'nome': new FormControl('', Validators.required),
  'razao_social': new FormControl('', [], CustomValidators.uniqueName),
  'cnpj': new FormControl('', CustomValidators.cnpj),
}, { updateOn: 'submit' }); // add this!

有了这个，这意味着您不再需要调用this.validateAllFormFields(control)，我假设它会切换一些布尔标志并检查验证或类似的东西。

这是一个表单示例，提交表单后总是返回错误：

https://stackblitz.com/edit/angular-rjnfbv?file=app/app.component.ts