我正在開發角度應用程式。我的代碼中有一些墊子切換。代碼如下：
<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/slide-toggle-overview-example.html
我有一鍵激活所有。如果用戶單擊此按鈕，則所有 mat-toggle 都會啟用并打開，并且按鈕的文本將更改為 Deactivate All，反之亦然。如果用戶去禁用一個切換，則此按鈕再次更改為全部激活，單擊此按鈕時應啟用所有切換，并且應將按鈕設定為全部停用，依此類推。我怎樣才能做到這一點？
uj5u.com熱心網友回復：
我添加了大量控制臺日志和方法來展示對更改做出反應的各種方式以及如何動態更改按鈕上的文本或如何打開/關閉所有開關。
https://stackblitz.com/edit/mat-slide-toggle-example-gkulzg?file=app/slide-toggle-overview-example.ts
但基本上你必須更新兩件事。形式是其中之一，撥動開關是其他東西。更新表單并不一定意味著切換值被改變，反之亦然——除非你把它們聯系在一起。
這里有改進的余地。例如，方法可以連接起來，而不是呼叫單獨的方法來轉為真/假，您可以只使用!=轉布林值等等。
<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();
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/420579.html
標籤：