表单提交时的角度表单错误组件触发验证

Posted 2023-03-13

【中文标题】表单提交时的角度表单错误组件触发验证

【英文标题】：Angular form error component trigger validation on form submit

【发布时间】：2020-02-12 18:22:54

【问题描述】：

我正在使用Angular 8。

我有以下反应形式组。

this.form = this.fb.group(
  query: ['', [
    Validators.required
  ]]
);

在 html 中

<form [formGroup]="form" (submit)="onSubmit">
    <textarea formControlName="query" placeholder="SELECT ..."></textarea>
    <form-errors [control]="f.query"></form-errors>

    <button type="submit">Submit</button>
</form>

form-errors 是一个自定义模板，它显示错误消息，该模板具有以下方法来触发控件的验证检查。

shouldShowErrors(): boolean 
    return this.control && 
           this.control.errors && 
           (this.control.dirty || this.control.touched);

因此，当控件被触摸或更改时会触发验证。

如何在提交表单时触发验证检查？如何通过传递的控件访问form-errors组件内的form？

【参考方案1】：

您可以在提交按钮上点击mark all controls as touched，为该按钮创建一个方法并调用它

 public markFormGroupTouched(formGroup: FormGroup) 
    Object.values(formGroup.controls).forEach(control => 
      control.markAsTouched();

      if (control.controls) 
          control.controls.forEach(c => this.markFormGroupTouched(c));
      
    );
  
  this.markFormGroupTouched(this.form);

demo

【讨论】：

是control.controls 用于嵌套表单组吗？因为它给出了错误AbstractControl has no attribute controls。我通过使formGroup.markAllAsTouched() 触及所有formGroup 及其工作来解决它。