入力要素の角ngmodel内部

与えられた、通りアドレスのための入力.

 <input
  id="street"
  name="street"
  #street="ngModel"
  [(ngModel)]="address.street"
  (ngModelChange)="onPropertyChange($event, street)"
  required
  minLength="1"
  placeholder="Enter Street Here"
  type="text"
 />

最後の記事では、上記のようにNGModel構成の適切なパターンを示しました.
今日はngmodelchangeに集中します.

  #street="ngModel"
  [(ngModel)]="address.street"
  (ngModelChange)=
    "onPropertyChange($event, street)"

サイの通り、NGModelとNgmodelChangesのトライアドは、ngmodelの内部のオープンをクラックすることができます.OnPropertyChangeハンドラーにNGModelが表示されます.

   onPropertyChange($event, street: ngModel) {
      debugger;       
   }

興味深いことは、“$ event”変数が現在の変更を示していることですしかしそれが「NGModel」であるので、「通り」変数ははるかに多くの情報を持っています.我々は、$イベントを必要としません
NGModel

ngmodelには、自動的に作成されたフォームコントロール、モデル、ビューモデル、および“要素”の名前が含まれます.他のプロパティは、他の記事を議論する予定です.
変更を簡単に使用して表示されます.
モデルとビューモデル

// the change to be made
let change = ngModel.viewModel;
// the prior value
let prior = ngModel.model;

まだ有効?

// use the ngModel valid function
let valid = ngModel.control.valid;

注意
id属性は厳密に必要ではなく、このコントロールが同じページで再利用される場合に問題を引き起こします.
リファクタリング版
IDまたは$イベントはありません.

 <input
  name="street"   
  #street="ngModel"
  [(ngModel)]="address.street"
  (ngModelChange)="onPropertyChange(street)"
  required
  minLength="1"
  placeholder="Enter Street Here"
  type="text"
 />

結論
NGModelがこのように使用されるとき、明示的なフォームグループとフォームコントロールの使用はもはや必要ありません.それは、反応形と形への破壊です.
ニュージャージーインターナル