从 TS 代码更改 mat-slide-toggle 值

问题描述

我有这样的用于 mat-slide-toggle 元素的 HTML 代码

<span class="form-control form-control-plaintext">
              <mat-slide-toggle name="status" checked=""
                              formControlName="status" #status>
              <label *ngIf="!formGroup.get('status').value" (click)="toggleStatus(status)" style="margin: 0">Status: disabled</label>
              <label *ngIf="formGroup.get('status').value" (click)="toggleStatus(status)" style="margin: 0">Status: Active</label>
            </mat-slide-toggle>
</span>

这是在toggleStatus()函数内

toggleStatus(status) {
    status.checked = !status.checked;
}

这工作正常，但仅适用于可视复选框，它不会更改表单控件值。 单击标签时如何更改表单控件值？

解决方法

您可以通过表单控件更改表单控件的值。

  public changeValueThroughFormControl(): void {
    const fc = this.formGroup.get("status");
    fc.setValue(!fc.value);
  }

但是如果您无论如何都使用反应式样式表单，那么您实际上并不需要 toggleStatus 方法。用户单击将自动更改表单控件的值。 See this stackblitz（打开控制台并点击按钮或滑动开关）。