title: Material2: extending MatInput
body: <p>I'm trying to make Material 2's <code>MatInput</code> listen to a service. I can't do that, of course, so I thought I could extend it instead. But no matter what I do, Angular tells me:</p>
  
  <blockquote>
    <p>Error: mat-form-field must contain a MatFormFieldControl. Did you
    forget to add matInput to the native input or textarea element?</p>
  </blockquote>
  
  <p>I kept adding parts of the original <code>MatInput</code>. Here's what I have now? Am I going down the wrong rabbit hole?</p>
  
  <pre><code>import { Platform}                                    from "@angular/cdk/platform";
  import { Directive, ElementRef, Optional, Renderer2 } from "@angular/core";
  import { FormGroupDirective, NgControl, NgForm }      from "@angular/forms";
  import { ErrorStateMatcher, MatInput}                 from "@angular/material";
  
  import { ReactorService }                             from "./thrc-react.service";
  
  @Directive({
    selector: `input[responsiveMatInput], textarea[responsiveMatInput]`,
    exportAs: 'responsiveMatInput',
    host: {
      'class': 'mat-input-element mat-form-field-autofill-control',
      // Native input properties that are overwritten by Angular inputs need to be synced with
      // the native input element. Otherwise property bindings for those don't work.
      '[attr.id]': 'id',
      '[placeholder]': 'placeholder',
      '[disabled]': 'disabled',
      '[required]': 'required',
      '[readonly]': 'readonly',
      '[attr.aria-describedby]': '_ariaDescribedby || null',
      '[attr.aria-invalid]': 'errorState',
      '(blur)': '_focusChanged(false)',
      '(focus)': '_focusChanged(true)',
      '(input)': '_onInput()',
    },
  })
  export class ResponsiveInputComponent extends MatInput {
    constructor(protected _elementRef: ElementRef,
                protected _renderer: Renderer2,
                protected _platform: Platform,
                @Optional() public ngControl: NgControl,
                @Optional() protected _parentForm: NgForm,
                @Optional() protected _parentFormGroup: FormGroupDirective,
                _defaultErrorStateMatcher: ErrorStateMatcher,
                reactor: ReactorService, // My service, in case it weren't obvious.
    ) {
      super(_elementRef, _renderer, _platform, ngControl,_parentForm,
        _parentFormGroup, _defaultErrorStateMatcher);
      reactor.reactor$.subscribe(event =&gt; {
          console.log('Received.', event);
          // My custom code...
        }
      );
  
    }
  }
  </code></pre>