Enable/Disable 在按钮点击的基础上切换

Question

我正在开发 angular 应用程序。我的代码中有一些 mat-toggle。代码如下：

<form
  class="example-form"
  [formGroup]="formGroup"
  (ngSubmit)="onFormSubmit(formGroup.value)"
  ngNativeValidate
>
  <mat-slide-toggle formControlName="enableWifi">Enable Wifi</mat-slide-toggle>
  <mat-slide-toggle formControlName="acceptTerms"
    >Accept Terms of Service</mat-slide-toggle
  >

  <p>Form Group Status: {{ formGroup.status}}</p>

  <button mat-rasied-button type="submit">Save Settings</button>
  <button mat-rasied-button type="submit">Activate All</button>
</form>

堆栈闪电战：

stackblitz.com/edit/mat-slide-toggle-example-guurez?file=app%2Fslide-toggle-overview-example.html

我有一个按钮激活所有。如果用户单击此按钮，则所有 mat-toggle 都将启用并打开，并且按钮的文本将更改为全部停用，反之亦然。如果用户去禁用一个切换，再次将此按钮更改为激活所有并且单击此按钮时所有切换都应启用并打开并且按钮应设置为全部停用等等。我该怎么做？

Answer 1

我添加了大量控制台日志和方法来展示对更改做出反应的各种方式以及如何动态更改按钮上的文本或如何切换所有开关on/off。

https://stackblitz.com/edit/mat-slide-toggle-example-gkulzg?file=app%2Fslide-toggle-overview-example.ts

但基本上你必须更新两件事。形式是其中之一，拨动开关是另一回事。更新表单并不一定意味着切换值发生变化，反之亦然 - 除非您将它们联系在一起。

这里还有改进的余地。例如，可以连接方法，而不是调用单独的方法来转换 true/false 你可以只使用 != 来转换布尔值等等。

<button mat-rasied-button (click)=onActivateAll() *ngIf="!isWifiToggled || !isTermsToggled">Activate All</button>

  onActivateAll() {
    console.log('activate all')
    this.formGroup.setValue({
      enableWifi: true, 
      acceptTerms: true
    });
    this.isWifiToggled = true;
    this.isTermsToggled = true;
    this.formGroup.updateValueAndValidity();
  }

Enable/Disable 在按钮点击的基础上切换

Enable/Disable toggle on the basis of button click

angular

angular8

angular9

angular10