Repository: angular
Issue: Proposal for an `ngFormChange` event
Labels: feature,state: Needs Design,freq2: medium,area: forms,feature: under consideration,feature: votes required

(Note that I'd be willing to work on a PR for this, but I don't want to start working on it unless I knew there was a chance it'd get accepted, so I wanted to create this issue first to test the water.)

## I'm submitting a...
<!-- Check one of the following options with "x" -->
<pre><code>[x] Feature request</code></pre>

## Current behavior
Currently, due to the changes in Angular 6, when you subscribe to a `ngForm`'s `valueChanges`, the "plain JS model" values have not yet been updated:

```ts
@Component({
  selector: 'my-form-component',
  template: `
    <ngForm>
      <input type="text" name="First Name" [(ngModel)]="user.firstName" />
    </ngForm>
  `,
})
class MyFormComponent {
  user: User = { firstName: '' };

  @ViewChild(NgForm) ngForm: NgForm;

  ngAfterViewInit() {
    this.form.valueChanges.subscribe(() => {
      console.log(this.user.firstName);
    });
  }
}
```

When you type `C` in the textbox in the above example, the value that gets logged will still be an empty string `''`. `this.user.firstName` isn't updated until after the `valueChanges` emits. This is intended behavior due to other issues.

## Desired behavior
Because of this, there is currently _no way_ to hook into a change in an `ngForm` and have the updated model value.

To be consistent with template-driven forms, it'd be great if there was an `ngFormChange` event on an `ngForm` that would emit _after_ the model is updated:

```ts
@Component({
  selector: 'my-form-component',
  template: `
    <ngForm (ngFormChange)="onFormChange()">
      <input type="text" name="First Name" [(ngModel)]="user.firstName" />
    </ngForm>
  `,
})
class MyFormComponent {
  user: User = { firstName: '' };

  onFormChange() {
    console.log(this.user.firstName);
  }
}
```

This is similar to the original code, but the proposal would be that this event is fired after `this.user.firstName` is updated, so now it'd `console.log` `C` when you first type `C`, etc.

I don't think there is a sane `$event` value to pass in in this case... we could send in the form value based on `name` values (cuz we can't get the form model value in the `ngForm`). Could maybe just not send anything. The real issue this is aiming to solve is the _timing_.

## Minimal reproduction of the problem with instructions
Here's an example of `valueChanges` being updated "late" in Angular 6:

https://stackblitz.com/edit/angular-6-value-changes-v2?file=src%2Fapp%2Fapp.component.ts

(Compared to how it worked in Angular 5: https://stackblitz.com/edit/angular-5-value-changes-v2?file=src%2Fapp%2Fapp.component.ts)

## What is the motivation / use case for changing the behavior?
We find it _very_ useful in our code to have a way to know when a template driven form is updated (we've found it 100x easier to use template forms over reactive forms, and we get better type hinting), and we relied on `valueChanges` in Angular 5 that got broke when we updated to Angular 6. I understand why the change would be made, but that doesn't mean an `ngFormChange` type event wouldn't still be very useful.

See: https://github.com/angular/angular/issues/24312

## Environment

<pre><code>
Angular version: 6+

Browser:
- [x] Chrome (desktop) version latest
- [x] Firefox version latest

 
For Tooling issues:
- Node version: 10, 8  <!-- run `node --version` -->
- Platform:  Mac, Windows

Others:
<!-- Anything else relevant?  Operating system version, IDE, package manager, HTTP server, ... -->
</code></pre>