☰

Angularテンプレート駆動フォームの変更を聴く方法 質問する

tag-icon • tag-icon javascript angular
Angularテンプレート駆動フォームの変更を聴く方法 質問する

私のフォームでは：

<form>
   <label class="form-check-label">
     <input [(ngModel)]="options.o1" name="o1"
            type="checkbox" class="form-check-input" >
     Option 1
   </label>
   <label class="form-check-label">
     <input [(ngModel)]="options.o2" name="o2"
            type="checkbox" class="form-check-input" >
     Option 2
   </label>
</form>

2 つのチェックボックスのいずれかが変更されるたびに通知を受け取りたいのですが、各チェックボックスにイベント ハンドラーを追加するのではなく、フォームにイベント ハンドラーを追加します。実際には、フォームにはさらに多くのフィールドがあります。

ベストアンサー1

次のようなディレクティブを取得できますNgForm:

html

<form #form="ngForm">
   ...
</form>

ts

@ViewChild('form') ngForm: NgForm;

Angular 9以降では、static: true次のオプションを使用する必要があります。

@ViewChild('opportunityForm', { static: true }) ngForm: NgForm;

そして聞いてvalueChangesくださいNgForm.form

ts

ngOnInit() {
  this.formChangesSubscription = this.ngForm.form.valueChanges.subscribe(x => {
    console.log(x);
  })
}

ngOnDestroy() {
  this.formChangesSubscription.unsubscribe();
}

ng-run デモ

おすすめ記事