title: Angular directive get values from NgModel or FormControlName
body: <p>I have a directive that checks if the form component was create using Reactive Forms or a Template-Driven. I use that to maintain the compatibility between other components that use the same directive. All works very fine in Angular 8, but not in Angular 9.</p>
  <p>Inside my directive I have a method to get and set the field value, to set the filed status dirty or touched but to do that, I have a conditional to know what the form was used by the component.</p>
  <p>Unfortunately in Angular 9, I couldn't do that because I don't know how to do that. Please, if someone could help me, I appreciate it.</p>
  <p>Bellow my directive</p>
  <pre class="lang-ts prettyprint-override"><code>@Directive({
    selector: '[appSelect2Cities]',
  })
  export class Select2CitiesDirective implements OnChanges, AfterContentChecked, AfterViewInit {
    input: any;
  
    // Cast one of the types to a variable
    @ContentChild(NgModel, { static: false }) model: NgModel;
    @ContentChild(FormControlName, { static: false }) control: FormControlName;
  
    // ... some code here
  
    ngOnChanges(changes: SimpleChanges): void {
      if (this.model) {
        // ... some code here
      } else if (this.control) {
        // ... some code here
      }
    }
  
    ngAfterViewInit(): void {
      this.input = this.model || this.control;
  
      if (this.input === undefined) { // &lt;-- Always undefined here
        throw new Error('That directive needs to be used by ngModel or FormControlName');
      }
  
      this.initializeSelect2();
    }
      
    // ... some code here
  }
  </code></pre>
  <p>A sample when I'm using Reactive Forms</p>
  <pre class="lang-html prettyprint-override"><code>&lt;select
    appSelect2Cities
    class=&quot;form-control&quot;
    formControlName=&quot;cities&quot;
    [value]=&quot;citiesValue&quot;
    placeholder=&quot;Select a City&quot;
    (itemSelected)=&quot;onCitySelected($event)&quot;
  &gt;
  &lt;/select&gt;
  </code></pre>
  <p>and a sample when I'm using a Template-Driven</p>
  <pre class="lang-html prettyprint-override"><code>&lt;select
    appSelect2Cities
    class=&quot;form-control&quot;
    name=&quot;city&quot;
    [(ngModel)]=&quot;address.city&quot;
  &gt;
  &lt;/select&gt;
  </code></pre>