title: Reactive Form Validation errors not displaying in Angular 5
body: <p>I'm working on Angular 5 applications, I wanted to display the follow error message based on user inputs</p>
  <pre><code>emptyUserName = 'You must enter a username';
  minlengthUserName = 'User name must be at least 3 characters long';
  maxlengthUserName = 'Username cannot exceed 20 characters';
  userNamePattern = 'Username should be in alphanumeric only';
  </code></pre>
  <p>But the issue is only, <code>emptyUserName</code> works others doesn't work and no errors in console also.</p>
  <p>Below is my component code</p>
  <pre><code>    this.loginForm = new FormGroup({
          userName: new FormControl('', [Validators.required, Validators.minLength(3), Validators.maxLength(20), Validators.pattern(/^[a-zA-Z0-9]+$/)]),
          password: new FormControl('', [Validators.required])
      });
  </code></pre>
  <p>Below is my Template code,</p>
  <pre><code> &lt;form class=&quot;ro-form&quot; [formGroup]=&quot;loginForm&quot; (ngSubmit)=&quot;doLogin()&quot; novalidate&gt;
          &lt;div class=&quot;form-group&quot;&gt;
            &lt;label class=&quot;labelHead&quot; for=&quot;username&quot;&gt;
              &lt;b&gt;Username&lt;/b&gt;
            &lt;/label&gt;
            &lt;input type=&quot;text&quot; id=&quot;username&quot; formControlName=&quot;userName&quot; placeholder=&quot;username&quot;&gt;
  
            &lt;div *ngIf=&quot;loginForm.controls.userName.touched &amp;&amp; loginForm.controls.userName.errors?.required&quot; class=&quot;form-error-messages&quot;
              id=&quot;error-no-username&quot;&gt;
              {{emptyUserName}}
            &lt;/div&gt;
            &lt;div *ngIf=&quot;loginForm.controls.userName.touched &amp;&amp; loginForm.controls.userName.errors?.minLength&quot; class=&quot;form-error-messages&quot;
              id=&quot;error-minlength-username&quot;&gt;
              {{minlengthUserName}}
            &lt;/div&gt;
            &lt;div *ngIf=&quot;loginForm.controls.userName.touched &amp;&amp; loginForm.controls.userName.errors?.maxLength&quot; class=&quot;form-error-messages&quot;
              id=&quot;error-maxlength-username&quot;&gt;
              {{maxlengthUserName}}
            &lt;/div&gt;
            &lt;div *ngIf=&quot;loginForm.controls.userName.touched &amp;&amp; loginForm.controls.userName.errors?.pattern&quot; class=&quot;form-error-messages&quot;
              id=&quot;error-pattern-username&quot;&gt;
              {{userNamePattern}}
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  <p>What I'm doing wrong here ? Please guide me</p>