Question

以我的形式：

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

我希望每当两个复选框中的一个被更改时都会被通知，而不是通过向每个复选框添加事件处理程序，而是通过向表单添加事件处理程序，实际上表单中还有更多字段。 / p>

Answer 1

你可以抓住NgForm指令，如：

<强> HTML

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

<强> TS

@ViewChild('form') ngForm: NgForm;

然后在valueChanges

上收听NgForm.form

<强> TS

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

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

<强> ng-run demo

Answer 2

你应该使用反应形式作为@Remify提及，之后你可以试试这个：

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

要使用反应形式，请检查角度文档：

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

Answer 3

我使用了可接受的答案，并基于此创建了一个值得关注的演示版本。

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

Answer 4

我有一个坏消息：使用被动形式。它们正是你所描述的。

如何倾听角度模板驱动形式的变化

4 个答案: