title: How to use ngModel's instance of FormControl in the ngOnInit() method?
body: <p>I was thinking of using Angular Material autocomplete module like they have an example <a href="https://stackblitz.com/angular/vnmqnvqelqd?file=app%2Fautocomplete-filter-example.ts" rel="nofollow noreferrer">here</a>.
  They say in the overview that template-driven forms are possible to use. So I thought I'd give it a go. </p>
  
  <p>Template:</p>
  
  <pre><code>&lt;form (ngSubmit)="doSmth()" #f="ngForm"&gt;
      &lt;mat-form-field&gt;
          &lt;input type="text" required id="name" (ngModel)="myControl" name="name" matInput [matAutocomplete]="auto"&gt;
              &lt;mat-autocomplete #auto="matAutocomplete"&gt;
                  &lt;mat-option *ngFor="let option of filteredOptions | async" [value]="option"&gt;{{ option }}&lt;/mat-option&gt;
              &lt;/mat-autocomplete&gt;
      &lt;/mat-form-field&gt;
      &lt;button type="submit" [disabled]="!f.form.valid"&gt;Click&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Component:</p>
  
  <pre><code>@Component({
    selector: 'autocomplete-filter-example',
    templateUrl: 'autocomplete-filter-example.html',
    styleUrls: ['autocomplete-filter-example.css'],
  })
  export class AutocompleteFilterExample implements OnInit {
    myControl: FormControl();
    options: string[] = ['One', 'Two', 'Three'];
    filteredOptions: Observable&lt;string[]&gt;;
  
    ngOnInit() {
      this.filteredOptions = this.myControl.valueChanges
        .pipe(
          startWith(''),
          map((value: string) =&gt; this.filter(value))
        );
    }
  
    private filter(value: string): string[] {
      const filterValue = value.toLowerCase();
  
      return this.options.filter(option =&gt; option.toLowerCase().includes(filterValue));
    }
  }
  </code></pre>
  
  <p>Trouble is that when I run it, I get an error: </p>
  
  <pre><code>AppComponent.html:1 ERROR TypeError: Cannot read property 'valueChanges' of undefined
  </code></pre>
  
  <p>So I'm guessing the ngModel was binded after the init? Or why doesn't this work? Do I need to use a sepaparte instance of <code>FormControl</code>?</p>