Question

我正在使用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组件内的form-errors？

Answer 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

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

1 个答案: