title: Cannot read property 'value' of undefined while testing a custom directive which gets an injected form control in Angular using jasmine
body: <p>I am writing test cases using jasmine karma to test a custom directive.
  The directive is used on an input box of type text and prevents alphabets from being entered. The form control is injected by Angular here.
  <a href="https://stackoverflow.com/a/41175292/10411625">Reference answer to add NgControl to access FormControl value</a></p>
  <pre><code>export class PreventAlphaDirective {
      public regex = //get some regex values from a const file
      
      constructor(public formControl: NgControl) {} //injected by Angular. Having difficulty here to pass form control value from jasmine I GUESS
  
      @HostListener('input', ['$event'])
      input(event: KeyboardEvent) {
          const val = this.formControl.control.value;
          let inp = '';
          for (const char of val) {
             if (char.match(this.regex.NUMBERS)) {
               inp += char;
             }
          }
        this.formControl.control.setValue(inp);
      }
  }
  </code></pre>
  <p>I am new to Angular and after reading articles on how to test a custom directive, I read about creating a test component.</p>
  <p>I tried the following. But the test case does not cover the above input method and mostly form control value is not set.</p>
  <p>Please help.</p>
  <p>Here the code of my testing component and spec file</p>
  <pre><code>@Component({
  selector: 'app-testingcomponent',
  template:
      `&lt;form [formGroup]=&quot;testForm&quot;&gt;     
       &lt;input type=&quot;text&quot; formControlName=&quot;amount&quot; appPreventAlpha /&gt;
      &lt;/form&gt; `,
      styleUrls: ['./testingcomponent.component.scss'],
      })
  export class TestingcomponentComponent implements OnInit {
         constructor(private fb: FormBuilder) { }
         public testForm: FormGroup;
         ngOnInit() {
             this.testForm = this.fb.group({
             amount: ['12345', [Validators.required]],
             });
         }
      } 
  </code></pre>
  <p>Spec file</p>
  <pre><code>describe('TestingcomponentComponent', () =&gt; {
  let component: TestingcomponentComponent;
  let fixture: ComponentFixture&lt;TestingcomponentComponent&gt;;
  let inputElement: DebugElement;
  
  beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
          imports: [ReactiveFormsModule, FormsModule],
          declarations: [TestingcomponentComponent, PreventAlphaDirective],
      });
  })); 
  
  beforeEach(() =&gt; {
    fixture = TestBed.createComponent(TestingcomponentComponent);
    fixture.detectChanges();
    component = fixture.componentInstance;
    inputElement = fixture.debugElement.query(By.css('input'));
  }); 
  </code></pre>
  <p>Here this is the test case</p>
  <pre><code>it('for keypress input', () =&gt; {
       inputElement.triggerEventHandler('input', {});
       fixture.detectChanges();
       // did not expect anything for now. Just checking code is covered or not
  }); 
  </code></pre>
  <p>Update: Here is the error while running the ng test</p>
  <pre><code>ERROR: 'ERROR', TypeError: Cannot read property 'value' of undefined
  TypeError: Cannot read property 'value' of undefined
  at Object.eval [as handleEvent] 
  </code></pre>