title: Angular 5 form custom validation is not working properly
body: <p>I am working on Angular 5 and I have a form with a field username. I want to integrate a custom validation for minimum character length and avoid blank space.</p>
  
  <pre><code>&lt;input type="text" class="form-control " id="account-details-username" placeholder="" formControlName="username" &gt;
          &lt;div *ngIf="form.get('accountDetails.username').touched &amp;&amp; form.get('accountDetails.username').invalid" class="alert alert-danger"&gt;
            &lt;div *ngIf="form.get('accountDetails.username').errors.required"&gt;Username is required.&lt;/div&gt;
            &lt;div *ngIf="form.get('accountDetails.username').errors.minimumSix"&gt;Username must contain at least 6 characters&lt;/div&gt;
            &lt;div *ngIf="form.get('accountDetails.username').errors.blankSpace"&gt;Username does not contain blank space.&lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>I tried to create a custom method for that. But invoking the first condition only. </p>
  
  <pre><code>test(control: any) {
  console.log(control.value);
  let minimumSix = new RegExp("^[a-zA-Z0-9!@#$%^&amp;*]{6,}");
  
  if (!minimumSix.test(control.value)) {
    return { 'minimumSix': true };
  }
  
  if(control.value.match("^\\s+$")) {
    console.log("blank");
    return { 'blankSpace': true };
  }
  
  return null;
  }
  </code></pre>
  
  <p>Not checking the blank space validation.</p>