title: Cannot read property of custom Validator and required - Angular
body: <p>I'm try to make custom Validators that give user message when he/she leave a space on text but i received this error.</p>
  
  <ul>
  <li>1-Cannot read property 'removeSpaceFromUserName' of undefined</li>
  <li>2-Cannot read property 'required' of null
     at Object.eval [as updateDirectives]</li>
  </ul>
  
  <p>Here's the html of the component</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;form [formGroup]='form'&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="username"&gt;Username&lt;/label&gt;
              &lt;input 
                  formControlName='username'
                  id="username" 
                  type="text" 
                  class="form-control"&gt;
                  &lt;div *ngIf="username.touched &amp;&amp; username.touched"  class="alert alert-danger"&gt;
                       &lt;div *ngIf="username.errors.required"&gt; You need to enter user name&lt;/div&gt;
                       &lt;div *ngIf="username.errors.minlength"&gt; Min Length is 
                          {{ username.errors.minLength.requiredLength}}
                          &lt;/div&gt;
                        &lt;div *ngIf="UserNameValiditors.removeSpaceFromUserName"&gt;
                             removeSpaceFromUserName &lt;/div&gt;   
                  &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="password"&gt;Password&lt;/label&gt;
              &lt;input 
                  formControlName='password'
                  id="password" 
                  type="text" 
                  class="form-control"&gt;
          &lt;/div&gt;
          &lt;button class="btn btn-primary" type="submit"&gt;Sign Up&lt;/button&gt;
      &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's the custom validator class</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { AbstractControl, ValidationErrors } from "@angular/forms";
  
  export class UserNameValiditors {
      static removeSpaceFromUserName(control: AbstractControl): ValidationErrors | null {
          if ((control.value as string).indexOf(' ') &gt;= 0) {
              return {
                  removeSpaceFromUserName: true
              };
          }
          else {
              return null;
          }
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component } from '@angular/core';
  import { FormControl , FormGroup , Validators } from "@angular/forms";
  import { UserNameValiditors } from './UserNameValditors';
  
  @Component({
    selector: 'signup-form',
    templateUrl: './signup-form.component.html',
    styleUrls: ['./signup-form.component.css']
  })
  export class SignupFormComponent {
  
    form= new FormGroup(
      {
         username  : new FormControl('',
        [
          Validators.required,
          Validators.minLength(3) ,
          UserNameValiditors.removeSpaceFromUserName
        ]) ,
         password  : new FormControl('',Validators.required)
      });
  
      get username()
      {
        return this.form.get('username');
      }
    
  }</code></pre>
  </div>
  </div>
  </p>