как слушать изменения формы с угловым шаблоном

в моей форме:

<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>

Я хочу получать информацию каждый раз, когда изменяется один из двух флажков, а не добавляя обработчик событий к каждому из флажков, но добавляя обработчик событий в форму, в действительности в форме гораздо больше полей.

Ответ 1

Вы можете получить директиву NgForm например:

HTML

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

Т.С.

@ViewChild('form') ngForm: NgForm;

а затем прослушать valueChanges на NgForm.form

Т.С.

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

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

ng-run demo

Ответ 2

Вы должны использовать реактивную форму, как указано в @Remify, и после этого вы можете попробовать следующее:

this.form.valueChanges.subscribe(() => {
     console.log('form changed');
});

Для использования реактивной формы проверьте угловую документацию:

https://angular.io/guide/reactive-forms

Ответ 3

Что касается ответа yurzui, что если я хотел бы узнать, какие именно поля изменились? Потому что x в функции подписки возвращает мне литерал объекта, содержащий все поля и их соответствующие значения в форме, я не могу определить, какое именно поле вызывает изменение значения.

Ответ 4

Я использовал принятый ответ и опираюсь на то, что создаю демо-версию, к которой относятся.

Файл TS

export class AppComponent {

  options: any;
  formChangesSubscription: any;
  @ViewChild('form') ngForm: NgForm;

  updated: any;

  constructor() {
    this.options = { o1: true, o2: false }
  }

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

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

HTML файл

<form #form="ngForm">
  <label class="form-label">
     <input [(ngModel)]="options.name" name="name"
            type="text" class="form-input" >

   </label>
   <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>

<label>{{updated?.o1}}</label>
<label>{{updated?.o2}}</label>
<label>{{updated?.name}}</label>

https://stackblitz.com/edit/angular-change-template-form?file=src/app/app.component.ts

Ответ 5

У меня плохая новость для вас: используйте реактивную форму. Это именно то, что вы описываете.