title: Angular: access FormControl from Directive
body: <p>I would like to add validators dynamically to my FormControl via a custom Directive.</p>
  
  <pre><code>@Directive({
      selector: "[idNumber]",
  })
  export class IdNumberDirective implements OnInit {
  
      constructor(private formControl: FormControl) { }
  
      ngOnInit() {
          this.addValidators(this.formControl);
      }
  
      addValidators(formControl: FormControl) {
          formControl.setValidators(Validators.compose(
              [Validators.required,
              Validators.minLength(3),
              Validators.maxLength(8)
              ]
          ));
      }
  
  
  
  &lt;mat-form-field&gt;
      &lt;mat-label&gt;{{label}}&lt;/mat-label&gt;
      &lt;input matInput
          [formControl]="idNumberFormControl"
          [placeholder]="placeholder"
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p><br><strong>I don't need to reference the nativeElement (via ElementRef).</strong>
  <br><strong>I would like to reference the formControl</strong>...
  <br>...and use it as such:</p>
  
  <pre><code>// HTML with my custom directive 'idNumber' ////////
  &lt;custom-input-string
      idNumber 
      [name]="'idNumber'"
      [label]="Id Number"
      [placeholder]=""&gt;
  &lt;/custom-input-string&gt;
  
  // TS ////////
  @ViewChild(CustomInputStringComponent) child: CustomInputStringComponent;
  
  ngAfterViewInit() {
      setTimeout(() =&gt; {
          this.child.insertIntoForm(this.signupForm);
      }, 0);
  }
  </code></pre>
  
  <p><br>Any ideas?
  <br>Thank you all.</p>