title: Angular: Cannot read properties of null (reading 'cannotContainSpace')
body: <p>I have created a custom ValidationFn in Angular. Somehow I always get the following error message:</p>
  <blockquote>
  <p>ERROR TypeError: Cannot read properties of null (reading
  'cannotContainSpace')
  at TutorRegistrationComponent_Template (template.html:31)
  at executeTemplate (core.js:9545)
  at refreshView (core.js:9414)
  at refreshComponent (core.js:10580)
  at refreshChildComponents (core.js:9211)
  at refreshView (core.js:9464)
  at renderComponentOrTemplate (core.js:9528)
  at tickRootContext (core.js:10754)
  at detectChangesInRootView (core.js:10779)
  at RootViewRef.detectChanges (core.js:22792)</p>
  </blockquote>
  <p>This is how I made the Validator:</p>
  <pre class="lang-js prettyprint-override"><code>export class UsernameValidators {
  
    static cannotContainSpace(control: AbstractControl): ValidationErrors | null {
      if ((control.value as string).indexOf(' ') &gt;= 0) {
        console.log('username in validator (cannotContainSpace)', control.value);
        const valError: ValidationErrors = { cannotContainSpace: true };
        return { cannotContainSpace: true };
      }
      return null;
    }
  }
  </code></pre>
  <p>This is how I used the Validator in my Page:</p>
  <pre class="lang-js prettyprint-override"><code>ngOnInit() {
    this.registrationForm = new FormGroup({
      username: new FormControl(
        '',
        [Validators.required, UsernameValidators.cannotContainSpace],
        UsernameValidators.shouldBeUnique
      ),
      password: new FormControl(''),
  
  
    });
  }
  </code></pre>
  <p>and in my view:</p>
  <pre><code>&lt;ion-item lines=&quot;full&quot;&gt;
     &lt;ion-label position=&quot;floating&quot;&gt;Username&lt;/ion-label&gt;
     &lt;ion-input type=&quot;text&quot; formControlName=&quot;username&quot;&gt;&lt;/ion-input&gt;
     &lt;div
       *ngIf=&quot;username.errors.cannotContainSpace &amp;&amp; username.touched&quot;
       class=&quot;alert alert-danger&quot;
     &gt;
       Username cannot contain space.
     &lt;/div&gt;
     &lt;div
       *ngIf=&quot;username.errors.required &amp;&amp; username.touched&quot;
       class=&quot;alert alert-danger&quot;
     &gt;
       Username is required.
     &lt;/div&gt;
     &lt;div
       *ngIf=&quot;username.errors.shouldBeUnique &amp;&amp; username.touched&quot;
       class=&quot;alert alert-danger&quot;
     &gt;
       Username is already taken.
     &lt;/div&gt;
     &lt;div *ngIf=&quot;username.pending&quot;&gt;Verfügbarkeit wird überprüft...&lt;/div&gt;
  &lt;/ion-item&gt;
  </code></pre>
  <p>What am I doing wrong? Thank you a lot!</p>