[解決済み] Angularでフォームの変更を監視する方法

質問

Angularで、次のようなフォームを作ることがあります。

<ng-form>
    <label>First Name</label>
    <input type="text" ng-model="model.first_name">

    <label>Last Name</label>
    <input type="text" ng-model="model.last_name">
</ng-form>

対応するコントローラの中で、このフォームの内容の変更を簡単に監視することができます。

function($scope) {

    $scope.model = {};

    $scope.$watch('model', () => {
        // Model has updated
    }, true);

}

以下は JSFiddleでのAngularの例 .

Angularで同じことを実現する方法がわからなくて困っているんだ。明らかに、私たちはもはや $scope や$rootScopeを使用します。きっと、同じことを達成できる方法があるのでは？

以下は PlunkerでのAngularの例 .

解決するには？

<サブ UPDです。 最新のAngularに合わせ、回答やデモを更新しています。

という事実により、フォームの変更全体を購読することができます。 フォームグループ フォームを表す valueChanges プロパティはObserverableのインスタンスです。

this.form.valueChanges.subscribe(data => console.log('Form changes', data));

この場合、フォームを手動で作成する必要があります。 フォームビルダー . このようなものです。

export class App {
  constructor(private formBuilder: FormBuilder) {
    this.form = formBuilder.group({
      firstName: 'Thomas',
      lastName: 'Mann'
    })

    this.form.valueChanges.subscribe(data => {
      console.log('Form changes', data)
      this.output = data
    })
  }
}

チェックアウト valueChanges を実行中です。 デモ : http://plnkr.co/edit/xOz5xaQyMlRzSrgtt7Wn?p=preview