title: Cannot inject form control in Angular5 directive (NullInjectorError: No provider for FormControl!)
body: <p>I want to pass in my from control attached to an input to my directive but i am getting the following error 'NullInjectorError: No provider for FormControl!'. </p>
  
  <p>Basically i am trying to create a validator that watches another input and makes sure the value on our input is always less or equal.</p>
  
  <p>I know there are other ways to do it but i would like to implement this as a validator and inject the formcontrol on the validated field in the input. I have included the component, directive and modules code if that helps and also a stackblitz link to the example. <a href="https://stackblitz.com/edit/angular-material2-issue-zxb1t2" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-material2-issue-zxb1t2</a></p>
  
  <p>component html code:</p>
  
  <pre><code>&lt;div&gt;
  &lt;input 
  required
  placeholder="total"
  [formControl]="total"&gt;
  
  &lt;div *ngIf="total.invalid"&gt;{{getErrors(total)}}&lt;/div&gt;
  
  &lt;input
  required 
  [lessThanInput]="total"
  placeholder="less than total" 
  [formControl]="lessThanTotal"&gt;
  
  &lt;div *ngIf="lessThanTotal.invalid"&gt;{{getErrors(lessThanTotal}}&lt;/div&gt;
  </code></pre>
  
  <p>directive code:</p>
  
  <pre><code> import { FormControl, NG_VALIDATORS, Validator, ValidatorFn} from 
  
      "@angular/forms";
      import {
        AfterContentInit,
        Directive, ElementRef,
        Input,
      } from "@angular/core";
  
      @Directive({
        selector: '[lessThanInput]',
        providers: [
          {
            provide: NG_VALIDATORS,
            useExisting: LessThanOtherControl,
            multi: true
          }
        ]
      })
      export class LessThanOtherControl implements Validator {
        validator: ValidatorFn;
        @Input() lessThanInput:FormControl;
        @Input() otherControlName: string;
        subscription: any;
  
        //if i remove fc:Formcontrol the error goes away but i cannot then access the form control through the constructor. Is this even possible? iIthought it was.
        constructor(private el: ElementRef, private fc: FormControl) {
          console.log(fc);
          this.validator = this.validateLessThanOther;
          this.lessThanInput.valueChanges.subscribe(this.fc.updateValueAndValidity);
        }
  
        validate(c: FormControl) {
          return this.validator(c);
        }
  
        validateLessThanOther(control: FormControl) {
  
          if (control &amp;&amp; control.value) {
            if (isNaN(+control.value) || isNaN(+this.lessThanInput.value)) {
              return null;
            }
  
            const isValid = +control.value &lt;= +this.lessThanInput.value;
  
            return isValid ? null : {
              'biggerThanOtherField': {
                value: control.value,
                otherInputName: this.otherControlName
              }
            };
          }
          return null;
        }
      }
  </code></pre>
  
  <p>module code:</p>
  
  <pre><code>@NgModule({
    imports: [
      BrowserModule,
      CommonModule,
      MaterialModule,
      FormsModule,
      ReactiveFormsModule,
      BrowserAnimationsModule
    ],
    declarations: [
      AppComponent,
      LessThanOtherControl,
    ],
    bootstrap: [AppComponent],
    providers: []
  })
  </code></pre>