angular - 如何在提交之前强制表单验证？

Question

我需要确保表单中的每个验证仅在用户输入值并聚焦时才会触发。当输入值并且用户按回车键时，这会导致问题。即使值无效(但值为空)，也会提交表单。

也许一个例子对于这种情况会更有帮助。

这是组件类:

readonly formGroup: FormGroup;

private constructor() {
  this.formGroup = new FormGroup(
    {
      firstControl: new FormControl(null),
      secondControl: new FormControl(null, Validators.minLength(4))
    },
    { updateOn: "blur" }
  );
}

onSubmit() {
  if (this.formGroup.valid) {
    // some logic here
  }
}

和 HTML 结构:

<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
  <label>First control</label>
  <input formControlName="firstControl" />
  <br />
  <label>Second control</label>
  <input formControlName="secondControl" />
  <br />
  <button>Submit</button>
</form>

在此示例中，当输入值 abc 并在第二个控件上按 enter 键时，表单将被提交。

附注我找到了一种解决方案，可以在 onSubmit() 函数中的 if 语句之前添加 document.activeElement.blur() 。这个解决方案在我的项目中是 Not Acceptable 。

Answer 1

如果表单无效，您可以通过调用 FormGroup.markAllAsTouched 方法来实现此目的。 如果您想强制验证表单组，可以在检查 valid 属性之前调用 FormGroup.updateValueAndValidity，如下所示:

onSubmit() {
  this._updateValueAndValidity();

  if (this.formGroup.invalid) {
    this.formGroup.markAllAsTouched(); // will set all the controls as touched 
  } else {
    // some logic here
  }
}

/** Update the value of form-group and validity of it and its descendants */
private _updateValueAndValidity() {
    for (let controlName in this.formGroup.controls) {
        this.formGroup.controls[controlName].updateValueAndValidity();
    }
}