Angular响应式表单如何重新触发验证以重复播放动画？

你的核心问题出在两点：

1. 表单控件设置了updateOn: 'submit'，这意味着验证逻辑只会在提交动作触发时运行，手动调用updateValueAndValidity()默认会遵循这个配置，不会主动触发验证器。
2. 你的CSS动画仅在控件从「未触碰/有效」变为「已触碰/无效」时触发，第一次提交后控件已经是touched状态，直接重新标记touched不会触发状态变化，自然不会播放动画。

要让动画再次播放，需要先重置控件状态，再强制触发验证并标记为触碰，完整代码如下：

// 1. 重置所有控件状态：标记为未触碰 + 清除错误
Object.keys(this.loginForm.controls).forEach(key => {
  const control = this.loginForm.get(key);
  if (control) {
    control.markAsUntouched();
    control.setErrors(null);
  }
});

// 2. 强制触发验证（绕过updateOn: submit的限制，手动运行验证器）
this.loginForm.controls.forEach(control => {
  const validatorErrors = control.validator?.(control);
  control.setErrors(validatorErrors);
});

// 3. 标记所有控件为已触碰，触发动画
this.loginForm.markAllAsTouched();

你之前调用updateValueAndValidity()时，没有指定updateOn参数，默认会沿用控件的updateOn: 'submit'配置，此时不会主动运行验证器——因为没有实际的提交动作触发。所以即使你清除了错误，验证逻辑没跑，控件自然不会重新出现无效标记。

另外，如果你不想手动调用验证器，也可以在updateValueAndValidity()里显式指定updateOn: 'submit'来强制触发验证：

Object.keys(this.loginForm.controls).forEach(key => {
  const control = this.loginForm.get(key);
  if (control) {
    control.markAsUntouched();
    control.setErrors(null);
    // 强制按submit规则更新有效性，触发验证
    control.updateValueAndValidity({ updateOn: 'submit', emitEvent: false });
  }
});

this.loginForm.markAllAsTouched();

确保你的CSS动画是基于状态变化触发的，比如：

.ng-invalid.ng-touched {
  animation: invalidShake 0.3s ease-in-out;
}

@keyframes invalidShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

只有当控件从ng-untouched变为ng-touched且同时是ng-invalid时，这个动画才会触发——这也是我们要先标记为untouched的原因。

内容的提问来源于stack exchange，提问作者derstauner