title: *ngIf showing div before it is supposed to
body: <p>In a simple form, I added an input, and a div for the error. Like this</p>
  
  <pre><code>        &lt;input 
          formControlName="username"
          id="username" 
          type="text" 
          class="form-control"&gt;
          &lt;div *ngIf="username.touched &amp;&amp; username.invalid" class="alert alert-danger"&gt;
              &lt;div *ngIf="username.errors.required" &gt;Username is required&lt;/div&gt;
              &lt;div *ngIf="username.errors.shouldBeUnique"&gt;Username is not unique&lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>I also created a class that holds the <code>shouldBeUnique</code> verifier, like so:</p>
  
  <pre><code>static shouldBeUnique(control: AbstractControl): Promise&lt;ValidationErrors | null&gt; 
  {
      return new Promise((resolve, reject) =&gt; {
          console.log('START');
          setTimeout(() =&gt; {
              console.log(control);
               if((control.value as string) == 'asd')
                   resolve({ shouldBeUnique: true});
               else 
                  resolve(null);
          }, 2000);    
      });
  }
  </code></pre>
  
  <p>Here is the component.ts</p>
  
  <pre><code>export class SignupFormComponent {
    form = new FormGroup({
      username: new FormControl('',[
         Validators.required,
         UsernameValidators.shouldBeUnique
      ]),
      password: new FormControl('', Validators.required),
    });
  
    get username(){
      return this.form.get('username');
    }
  }
  </code></pre>
  
  <p>Now, the thing is, in the tutorial I'm looking, when the teacher types 'asd' in the username input field, after 2 seconds, the div with corresponding error is displayed. </p>
  
  <p>When I type 'asd' in my field, the div with error is displayed immediately, and with no message. I just get a red div with no text whatsoever.</p>
  
  <p>His and my code are the same, BUT he is using angular 4, and I'm using angular 6.</p>
  
  <p>The purpose of this code is to simulate and explain the async calls. That's why this code makes no scence in real project. It's just a simulation.</p>
  
  <p>Is there a difference between A4 and A6 that makes the difference in my case?
  Why is my div for errors showing right when I change focus, rather then wait for 2s?
  How can I get the result that he is getting?</p>
  
  <p>I hope I provided enough info, im totaly new to angular.</p>