title: Issue regarding of hide and show error message on wrong input
body: <p>My project written in Angular 10. I have a component that has a simple form with 3 inputs: name, email, phone number.</p>
  <p>I need to check the input of the forms for this purpose I use Angular reactive forms.</p>
  <p>Here the template (for simplicity I removed email and phone number sections):</p>
  <pre><code>  &lt;form [formGroup]=&quot;contactForm&quot; (ngSubmit)=&quot;onSubmit()&quot; class=&quot;myForm&quot;&gt;
   
      &lt;div class=&quot;contact-container&quot;&gt;   
            &lt;div class=&quot;field&quot;&gt;
  
              &lt;div class=&quot;field&quot;&gt;
                &lt;p class=&quot;control has-icons-left has-icons-right&quot;&gt;
                  &lt;input class=&quot;input&quot; type=&quot;text&quot; placeholder=&quot;Full Name&quot; formControlName=&quot;name&quot;&gt;
                  &lt;span class=&quot;icon is-small is-left&quot;&gt;
                    &lt;i class=&quot;fas fa-user&quot;&gt;&lt;/i&gt;
                  &lt;/span&gt;
                &lt;/p&gt;
                &lt;span *ngIf=&quot;(name.dirty || name.touched) &amp;&amp; name.invalid &amp;&amp; name.errors.required&quot; class=&quot;error&quot;&gt;
                    *Name is required.
                &lt;/span&gt;
  
                &lt;span *ngIf=&quot;(name.dirty || name.touched ) &amp;&amp; name.errors.minlength&quot; class=&quot;error&quot;&gt;
                  *Name must be greater than 2 characters. 
                  
                &lt;/span&gt;
              &lt;/div&gt;
              
              &lt;input class=&quot;send-button&quot; type=&quot;button&quot; [disabled]=&quot;!contactForm.valid&quot; [ngClass]=&quot;{'notClickable': !contactForm.valid}&quot; value=&quot;send&quot;&gt;   
       &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>
  <p>And here is TypeScript for the component:</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
  
  @Component({
    selector: 'app-contact-form',
    templateUrl: './contact-form.component.html',
    styleUrls: ['./contact-form.component.scss']
  })
      export class ContactFormComponent implements OnInit {
        constructor() { 
          this.contactForm = this.createFormGroup();
        }
  
        get name() {
          return this.contactForm.get('name');
        }
        
        get phone() {
          return this.contactForm.get('phone');
        }
        
        get email() {
          return this.contactForm.get('email');
        }
  
        contactForm: FormGroup;
  
        ngOnInit(): void {}
  
        createFormGroup() {
          return new FormGroup({
            name: new FormControl('',  [Validators.required, Validators.minLength(2)]),
            email: new FormControl('', [Validators.required, Validators.email]),
            phone: new FormControl('', [Validators.required])
          });
        }
        onSubmit() {} 
      }
  </code></pre>
  <p>When I start to print the name and the first character added in the input box the message is showed:</p>
  <blockquote>
  <p>Name must be greater than 2 characters</p>
  </blockquote>
  <p>and that is OK.</p>
  <p>But when the second and third characters added the message is not hidden. Because of the <code>Validators.minLength(2)</code> I expect that after the second character is added to the input box the message will be hidden.</p>
  <p>Any idea why message does not hide when the second character added to the input box?</p>