title: How to restrict/define the type of control.value (AbstractControl)
body: <p>I'm using form builder/reactive forms and I need to validate a custom component that has non primitive type values, the component is an input box + dropdown select.</p>
  
  <pre><code>this.dataForm = this.fb.group({
    name: ['', [Validators.required, Validators.minLength(3)]],
    description: ['', [Validators.required, Validators.minLength(10)]],
    amount: [0, InputDropdownValidation.validateRange(0, 10)], // &lt;&lt;&lt; Custom component
    cost: [0]
  });
  </code></pre>
  
  <p>I've got a validator working on the input, it implements <code>ControlValueAccessor</code> to work with the reactive form. Now I want it to validate the type of object I'm using for this component's value: <code>InputDropdownItem</code> rather than just the input.</p>
  
  <pre><code>static validateRange(min, max) {
    return function (control: AbstractControl) {
      if (control.value &lt; min || control.value &gt; max) {
        return { outOfRange: true };
      }
      return null;
    };
  }
  </code></pre>
  
  <p>I can use this</p>
  
  <pre><code>console.log('validator prop = ', control.value.input);    
  console.log('validator prop = ', control.value.dropdownItem);
  </code></pre>
  
  <p>I'd like some sort of definition so that function only works with controls that have values of type <code>InputDropdownItem</code>. So if a developer did this:</p>
  
  <pre><code>console.log('validator prop = ', control.value.nonExistingProp); // undefined
  </code></pre>
  
  <p>It'd catch it in the compiler first.</p>
  
  <p><strong>Component for amount:</strong></p>
  
  <pre><code>  value: InputDropdownItem;
  
    // ...
  
    onInputChange(input: any) {
      this.value.input = input;
      this.valueChange.emit(this.value);
      this.propagateChange(this.value);
    }
  
    onDropdownChange(dropdownItem: DropdownItem) {
      this.value.dropdownItem = dropdownItem;
      this.valueChange.emit(this.value);
      this.propagateChange(this.value);
    }
  </code></pre>
  
  <p><strong>The InputDropdownItem</strong></p>
  
  <pre><code>export class InputDropdownItem {
    input: any;
    dropdownItem: DropdownItem;
  }
  </code></pre>