title: Angular2 reactive forms show error messages based on validation fail condition
body: <p>I want to mention that i am using separate generic component, to display errors, so I am not putting them directly inside of html to avoid repetition, so I can't chain and hardcode conditional directly in template.</p>
  
  <p>I have this field and two validations applied:</p>
  
  <pre><code>this.username = new FormControl('', [ Validators.minLength(5), Validators.required ]); 
  </code></pre>
  
  <p>How do I show validation error message for each of validations? Let's say I want to show both errors if nothing is in field on submit:<br>
  <strong>"Minimum length is 5"<br>
  "Field is required"</strong></p>
  
  <p>And then if you put something inside it should only show:<br>
  <strong>"Minimum length is 5"</strong></p>
  
  <p>This is an example but, my real life example is comparing two email fields, if they are the same, so if email is not correct is should show:<br>
  <strong>"Email is not correct"<br>
  "Email is not the same as first email field"</strong></p>
  
  <p>So if email is correct and emails are not the same should only show:<br>
  <strong>"Email is not the same as first email field"</strong></p>
  
  <p>I have validations working if not passed, but I am not sure how to show separately if one validation passed and another one not, because I have to properly append the real reason why it failed and not put some generic reason for both.</p>
  
  <p>Full example:</p>
  
  <p>Component for error display:</p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  
  @Component({
    selector: 'app-field-error-display',
    templateUrl: './field.error.display.component.html',
    styleUrls: ['./field.error.display.component.css']
  })
  export class FieldErrorDisplayComponent
  {
      @Input() errorMsg: string;
      @Input() displayError: boolean;
  }
  </code></pre>
  
  <p>Component html:</p>
  
  <pre><code>&lt;div *ngIf="displayError" &gt;
    &lt;small&gt;{{errorMsg}}&lt;/small&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Usage of erorr display in Register.html:</p>
  
  <pre><code>&lt;form [formGroup]="_form" (ngSubmit)="register()"&gt;
  &lt;h4&gt;Create a new account&lt;/h4&gt;
  &lt;div class="form-group"&gt;
    &lt;label for="email"&gt;Email Address&lt;/label&gt;
    &lt;input class="form-control" name="email" formControlName="email" /&gt;
    &lt;app-field-error-display [displayError]="formValidationService.IsFieldValid(_form,'email')" errorMsg="Please insert correct email"&gt;&lt;/app-field-error-display&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
    &lt;label for="emailConfirm"&gt;Email Address Confirm&lt;/label&gt;
    &lt;input class="form-control" name="emailConfirm" formControlName="emailConfirm" /&gt;
    &lt;app-field-error-display [displayError]="formValidationService.IsFieldValid(_form,'emailConfirm')" errorMsg="Please insert correct email"&gt;&lt;/app-field-error-display&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
    &lt;label for="password"&gt;Password&lt;/label&gt;
    &lt;input class="form-control" name="password" formControlName="password" /&gt;
    &lt;app-field-error-display [displayError]="formValidationService.IsFieldValid(_form,'password')" errorMsg="Please insert password"&gt;&lt;/app-field-error-display&gt;
  &lt;/div&gt;
  &lt;button type="submit" class="btn btn-default"&gt;Create Account&lt;/button&gt;
  &lt;/form&gt;
  &lt;div *ngIf="_registered" class="alert alert-success box-msg" role="alert"&gt;
    &lt;strong&gt;Account registered!&lt;/strong&gt; You will be redirected in sec
  &lt;/div&gt;
  </code></pre>
  
  <p>Register component:</p>
  
  <pre><code>ngOnInit() {
      this._form = this._formBuilder.group({
          email: ['', [Validators.required, Validators.email]],
          emailConfirm: ['', [Validators.required, Validators.email, MatchOtherValidator.Validate('email')]],
          password: ['', [Validators.required]]
      });
  
      this._registerModel = new RegisterModel();
  }
  </code></pre>
  
  <p>Custom match other validator:</p>
  
  <pre><code>import { FormControl } from '@angular/forms';
  
  export class MatchOtherValidator {
      static Validate(otherControlName: string) {
  
          let thisControl: FormControl;
          let otherControl: FormControl;
  
          return function matchOtherValidate(control: FormControl) {
  
              if (!control.parent) {
                  return null;
              }
  
              // Initializing the validator.
              if (!thisControl) {
                  thisControl = control;
                  otherControl = control.parent.get(otherControlName) as FormControl;
                  if (!otherControl) {
                      throw new Error('matchOtherValidator(): other control is not found in parent group');
                  }
                  otherControl.valueChanges.subscribe(() =&gt; {
                      thisControl.updateValueAndValidity();
                  });
              }
  
              if (!otherControl) {
                  return null;
              }
  
              if (otherControl.value !== thisControl.value) {
                  return {
                      matchOther: true
                  };
              }
  
              return null;
  
          }
      }
  }
  </code></pre>
  
  <p>Form validation service has this method:</p>
  
  <pre><code>public IsFieldValid(form: FormGroup, field: string){
      return !form.get(field).valid &amp;&amp; form.get(field).dirty;
  }
  </code></pre>