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

【问题标题】：Change mat-slide-toggle value from TS code从 TS 代码更改 mat-slide-toggle 值
【发布时间】：2021-05-24 03:47:43
【问题描述】：

我有 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;
}

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

【问题讨论】：

标签： angular typescript angular-material angular-material2

【解决方案1】：

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

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

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

【讨论】：