title: Angular reactive forms and custom validator error
body: <p>In my Angular 4 app, I have a <a href="https://angular.io/guide/form-validation#custom-validators" rel="nofollow noreferrer">custom form validator</a> that looks like this:</p>
  
  <pre><code>import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
  
  export function myCustomValidator(myCustomArg: string): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null =&gt; {
  
      if (control.value) {
        // do some checks with control.value and myCustomArg
        // return error if needed
      }
  
      // return null otherwise
      control.setErrors(null);
      return null;
    };
  }
  </code></pre>
  
  <p>but when I try to use it in one of my <a href="https://angular.io/guide/reactive-forms" rel="nofollow noreferrer">reactive forms</a>:</p>
  
  <pre><code>  ngOnInit() {
      this.form = new FormGroup({
        'myControl': new FormControl(null, [ myCustomValidator(...) ]),
        // ...
      });
    }
  </code></pre>
  
  <p>I get several errors:</p>
  
  <blockquote>
    <p>ERROR TypeError: Cannot read property 'emit' of undefined
        at FormControl.webpackJsonp.../../../forms/@angular/forms.es5.js.AbstractControl._updateControlsErrors (forms.es5.js:2836)
        at FormControl.webpackJsonp.../../../forms/@angular/forms.es5.js.AbstractControl.setErrors (forms.es5.js:2772)
        at file-extension.validator.ts:17
        at forms.es5.js:506
        at Array.map ()
        at _executeValidators (forms.es5.js:506)
        at FormControl.validator (forms.es5.js:462)
        at FormControl.webpackJsonp.../../../forms/@angular/forms.es5.js.AbstractControl._runValidator (forms.es5.js:2720)
        at FormControl.webpackJsonp.../../../forms/@angular/forms.es5.js.AbstractControl.updateValueAndValidity (forms.es5.js:2688)
        at new FormControl (forms.es5.js:3011)</p>
  </blockquote>
  
  <hr>
  
  <blockquote>
    <p>ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 0, nodeDef: {…}, 
    elDef: {…}, elView: {…}}</p>
  </blockquote>
  
  <hr>
  
  <blockquote>
    <p>ERROR Error: formGroup expects a FormGroup instance. Please pass one in.</p>
  </blockquote>
  
  <p>But unfortunately they are not very helpful.</p>