title: Angular 5 form validation (required) not working
body: <p>I am learning Angular 5 with TypeScript. I am completely new to it. I am now trying to construct a form and validating it. But it is not working properly.</p>
  <p>This is my component:</p>
  <pre><code>@Component({
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.scss'],
      animations: [routerTransition()]
  })
  export class LoginComponent implements OnInit {
  
      loginForm: FormGroup;
  
      errors = [];
  
      constructor(private fb: FormBuilder, public router: Router, private globals: GlobalsService, private http: Http) {
  
      }
  
      ngOnInit() {
          this.loginForm = new FormGroup({
              email: new FormControl(&quot;&quot;, Validators.required),
              password: new FormControl(&quot;&quot;)
          });
      }
  
      onLoggedin(formData) {
          
          alert(&quot;Submit form&quot;);
    
    
      }
  
  }
  </code></pre>
  <p>As you can see I am setting &quot;required&quot; validation attribute on the email field.
  This is my html.</p>
  <pre><code>&lt;div class=&quot;login-page&quot; [@routerTransition]&gt;
      &lt;div class=&quot;row justify-content-md-center&quot;&gt;
          &lt;div class=&quot;col-md-4&quot;&gt;
              &lt;img src=&quot;assets/images/logo.png&quot; width=&quot;150px&quot; class=&quot;user-avatar&quot; /&gt;
              &lt;h1&gt;Yo Cash Flow&lt;/h1&gt;
              &lt;div class=&quot;alert alert-danger&quot; *ngFor=&quot;let error of errors&quot;&gt;
                  &lt;strong&gt;{{ error.msg }}&lt;/strong&gt;
              &lt;/div&gt;
              &lt;form [formGroup]=&quot;loginForm&quot; role=&quot;form&quot; (ngSubmit)=&quot;onLoggedin(loginForm.value)&quot;&gt;
                  &lt;div class=&quot;form-content&quot;&gt;
                      &lt;div class=&quot;form-group&quot;&gt;
                          &lt;input type=&quot;text&quot; name=&quot;email&quot; formControlName=&quot;email&quot; class=&quot;form-control input-underline input-lg&quot; placeholder=&quot;Email&quot;&gt;
                          &lt;div *ngIf=&quot;loginForm.controls['email'].errors.required&quot; class=&quot;text-danger&quot;&gt;Email is required&lt;/div&gt;
                      &lt;/div&gt;
  
   
                  &lt;/div&gt;
                  &lt;button type=&quot;submit&quot; class=&quot;btn rounded-btn&quot;&gt; Log in &lt;/button&gt;
                  &amp;nbsp;
                  &lt;a class=&quot;btn rounded-btn&quot; [routerLink]=&quot;['/signup']&quot;&gt;Sign up&lt;/a&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>As you can see I am trying to show the error individually. I mean for &quot;required&quot; attribute, I am retrieving the error message like this errors.required. But it is not working. But when I tried to use &quot;valid&quot; like below, it is working.</p>
  <pre><code>loginForm.controls['email'].invalid
  </code></pre>
  <p>But I want to retrieve the error individually because I want to show the different message for the different error. How can I fix this? Why it is not working when I use <code>loginForm.controls[&quot;email&quot;].errors.required</code>? What is the correct way of showing the different message for the different validation rule?</p>