title: CSS Invalid selector not working with reactive form
body: <p>I'm facing a problem where i cannot bind :invalid css selector with my input since i have custom validation. invalid is only active with basic validator example: input type="email" so the invalid will work with example@ or example@example.exmaple while my function only validates the last one (example@example.example).
  <a href="https://stackblitz.com/edit/angular-nedzmt?embed=1&amp;file=src/app/app.component.ts&amp;view=preview" rel="nofollow noreferrer">Project Link</a></p>
  
  <blockquote>
    <p>HTML FILE</p>
  </blockquote>
  
  <pre><code>&lt;input class="custom-input" type="email" [(ngModel)]='Email' name="email" placeholder="Email" formControlName="emailTxt"&gt;
  &lt;div class="err&gt;
     this is an error
  &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>TypeScript File</p>
  </blockquote>
  
  <pre><code>this.signUpForm = this._fb.group({
     emailTxt: [null, Validators.compose([
       Validators.required
     ])]
   }, {
       validators: [
         EmailValidation('emailTxt'),
       ]
     });
  </code></pre>
  
  <blockquote>
    <p>Form Validation Function</p>
  </blockquote>
  
  <pre><code>export function EmailValidation(controlName: string) {
    return (formGroup: FormGroup) =&gt; {
      const control = formGroup.controls[controlName];
  
      if (control.errors &amp;&amp; !control.errors.invalidEmail) {
        return;
      }
      if (control.value.trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
        control.setErrors({ invalidEmail: true });
      }
      else {
        control.setErrors(null);
      }
    }
  }
  </code></pre>
  
  <blockquote>
    <p>CSS File</p>
  </blockquote>
  
  <pre><code>.custom-input:invalid{
      &amp; ~ .err {
        max-height: 200px;
        padding: 0 18px 10px 20px;
        color: red;
      }
  }
  </code></pre>
  
  <p>i expect the invalid selector should to be triggered with every control.setErrors() function</p>