title: onChange event on form emits output event only after blur
body: <p>In an app-form component there is a form. In a 'consumer component' (correct me if I'm wrong, not sure what to call it otherwise) I would like to enable or disable a button if that form is valid.</p>
  <p>So to start with the consumer component:</p>
  <p><strong>./app-thing.component.ts (consumer)</strong></p>
  <pre><code>// ...imports
  
  @Component({
    selector: 'app-thing',
    template: `
      &lt;app-form (isValidForm)=&quot;checkFormValidity($event)&quot;&gt;
        &lt;ng-container action&gt;
          &lt;button [disabled]=&quot;!buttonEnabled&quot;&gt;Submit&lt;/button&gt;
        &lt;/ng-container&gt;
      &lt;/app-form&gt;
    `,
  })
  export class AppThing {
    buttonEnabled = false;
  
    checkFormValidity(isValid: boolean) {
      this.buttonEnabled = isValid;
    }
  }
  </code></pre>
  <p>Now to listen for events I am using the <code>onchange</code> event of the form:</p>
  <p><strong>./app-form.components.ts (dynamic component)</strong></p>
  <pre><code>// ...imports
  
  @Component({
    selector: 'app-form',
    template: `
      &lt;form [formGroup]=&quot;form&quot; (change)=&quot;formChange()&quot;&gt;
        &lt;label&gt;
          Name:
          &lt;input type=&quot;text&quot; formControlName=&quot;name&quot; /&gt;
        &lt;/label&gt;
        &lt;ng-content select=&quot;[action]&quot;&gt;&lt;/ng-content&gt;
      &lt;/form&gt;
    `
  });
  export class FormComponent {
    @Output()
    isValidForm = new EventEmitter&lt;boolean&gt;();
  
    form = this.formBuilder.group({
      name: ['', Validators.required],
    });
  
    constructor(private formBuilder: FormBuilder) {}
  
    formChange() {
      this.isValidForm.emit(this.form.valid);
    }
  }
  </code></pre>
  <p>But now it only enables or disables the button if the user clicks somewhere on the page after an input change.</p>
  <p>How do I change this to have it enable/disable the button when an input value changes?</p>