Question

我是Angular新手。我的组件中有三个复选框。当每个复选框的选中状态都发生变化时，我需要获取所有三个复选框的选中状态。

        <div class="mb-15 p-0 ">
            <div class="col-2 p-0 font-700 font-12">
                <mat-checkbox (change)="onChange1($event)">
                </mat-checkbox>
            </div>
        </div>
        <div class="mb-15 p-0 ">
            <div class="col-2 p-0 font-700 font-12">
                <mat-checkbox (change)="onChange2($event)">
                </mat-checkbox>
            </div>
        </div>
        <div class="mb-15  p-0 ">
            <div class="col-2 p-0 font-700 font-12">
                <mat-checkbox (change)="onChange3($event)">
                </mat-checkbox>
            </div>
        </div>

根据复选框的状态，必须在我的方法中做一个小的逻辑，并将POST调用发送到WEB API。

在任何单个复选框状态更改中捕获所有三个复选框状态的最佳方法是什么？感谢一些帮助。

Answer 1

您可以为此目的使用ReactiveForms。

演示

https://stackblitz.com/edit/angular-ivy-nauyv1?file=src%2Fapp%2Fapp.component.ts

代码

ts

form: FormGroup;

constructor(private fb: FormBuilder) {}

ngOnInit() {
  this.form = this.fb.group({
    /**
     * initial checkbox values
     */
    checkboxes: this.fb.array([false, false, false])
  });

  this.form.valueChanges
    .subscribe(v => {
      /**
       * You get the status change here
       */
      console.log(v);
    });
}

get checkboxes() {
  return (this.form.get("checkboxes") as FormArray).controls;
}

html

<form [formGroup]="form">
  <form formArrayName="checkboxes">
    <div *ngFor="let cb of checkboxes; let i = index">
      <input type="checkbox" [formControlName]="i">
    </div>
  </form>
</form>

您可以将input替换为上面的mat-checkbox。

注意

请确保导入ReactiveFormsModule

参考

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

Angular：如何在更改时捕获复选框状态

1 个答案: