如何以角度反应形式重新验证

Question

我有一个像这样的简单表格：

initLoginForm() {
    return new FormGroup({
      userEmail: new FormControl('', {
        validators: [Validators.required, Validators.email],
        updateOn: 'submit',
      }),
      password: new FormControl('', {
        validators: [Validators.required],
        updateOn: 'submit',
      }),
      rememberMe: new FormControl(),
    });
  }

提交后我会这样做：

this.loginForm.markAllAsTouched();

这会触发验证。在 css 中，我向输入添加了一些动画（如果它们无效）。如果表单（或其中一个输入）无效，则此方法有效，但仅在第一次。动画被添加到

ng-invalid

规则中。

问题是，如何重新验证表单以便再次播放动画？

我尝试重置所有错误并验证上述表格：

Object.keys(this.loginForm.controls).forEach((key) => {
      this.loginForm.get(key)?.setErrors(null);
    });
    this.loginForm.updateValueAndValidity();

    this.loginForm.markAllAsTouched();

但是这样我什至没有得到表单上的无效标记。是的，我很清楚，我清除了所有错误，但之后我调用

this.loginForm.markAllAsTouched();

应该再次验证表单，不是吗？

Answer 1

您可以尝试重置各个控件：

for (const controlName in this.completeInviteForm.controls) {
  const control = this.completeInviteForm.get(controlName)!;
  control.reset(control.value);
}

默认情况下会将控件标记为原始、未触及并重置状态，您可以将值传递给

reset

函数来手动设置状态。