title: angular 6 :- Reactive form validation is not working propery
body: <p>need regarding angular 6 reactive form validation, I have studied from official angular website </p>
  
  <p>I want to validate my form and display the different error message to different error</p>
  
  <p>Component code</p>
  
  <pre><code>this.pinForm = new FormGroup({
        'defaultPin': new FormControl(this.pin.oldPin, [
          Validators.required,
          Validators.minLength(4)
        ])
      });
  </code></pre>
  
  <p>Html code</p>
  
  <pre><code>&lt;form [formGroup]="pinForm" #formDir="ngForm"&gt;
  
          &lt;div class="form-group"&gt;
            &lt;label for="defaultPin"&gt;Default Pin&lt;/label&gt;
            {{formDir.valid}}
            &lt;input type="text" name="defaultPin" class="form-control" id ="defaultPin" aria-describedby="defaultPin" placeholder="Please enter your old Pin"
            formControlName = "defaultPin" /&gt;
            &lt;small id="defaultPin" class="form-text text-muted"&gt;Check your Email address for default pin.&lt;/small&gt;
            {{defaultPin}}
  
            &lt;div *ngIf="defaultPin.invalid &amp;&amp; (defaultPin.dirty || defaultPin.touched)"
                class="alert alert-danger"&gt;
      enter code here
              &lt;div *ngIf="defaultPin.errors.required"&gt;
                Name is required.
              &lt;/div&gt;
              &lt;div *ngIf="defaultPin.errors.minlength"&gt;
                Name must be at least 4 characters long.
              &lt;/div&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>But when I run I'm getting this error</p>
  
  <pre><code>ERROR TypeError: Cannot read property 'invalid' of undefined
  at Object.eval [as updateDirectives] (AddPinComponent.html:21)
  at Object.debugUpdateDirectives [as updateDirectives] (core.js:10756)
  at checkAndUpdateView (core.js:10153)
  at callViewAction (core.js:10394)
  at execComponentViewsAction (core.js:10336)
  at checkAndUpdateView (core.js:10159)
  at callViewAction (core.js:10394)
  at execEmbeddedViewsAction (core.js:10357)
  at checkAndUpdateView (core.js:10154)
  at callViewAction (core.js:10394)
  </code></pre>
  
  <p>Please help me</p>