I have a simple form like this:

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(),
    });
  }

On submit I do this:

this.loginForm.markAllAsTouched();

This triggers validation. In css I added some animation to the inputs, if they are invalid. This works, but only the first time, if the form (or one of the inputs) gets invalid. The animations are added to an ng-invalid rule.

The question is, how can I revalidate the form in order to have also the animations played again?

I tried to reset all errors and validate the form as above:

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

    this.loginForm.markAllAsTouched();

But with this I don’t even get the invalid markers on the form. Yes, it’s clear to me, that I clear all erros, but after that I call this.loginForm.markAllAsTouched(); which should validate the form again, shouldn’t it?