如何通过formControl在条件下强制mat-slide-toggle保持为true？

有几种方法可以实现你需要的效果，让mat-slide-toggle在满足特定条件时始终保持为true，用户切换为false时要么无法操作，要么立即恢复。

方法一：通过FormControl值监听处理（组件内逻辑） #

如果开关绑定了FormControl，可以直接在组件类中监听值的变化，当触发条件且值变为false时，强制将其设回true。

组件类代码：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  form: FormGroup;
  // 替换为你的实际条件判断逻辑
  someCondition: boolean = false;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.form = this.fb.group({
      compression: [true] // 初始值设为true
    });

    // 监听开关控件的数值变化
    const compressionCtrl = this.form.get('compression');
    compressionCtrl?.valueChanges.subscribe(currentValue => {
      // 当条件满足且当前值为false时，强制恢复为true
      if (this.someCondition && !currentValue) {
        // 使用emitEvent: false避免循环触发监听
        compressionCtrl.setValue(true, { emitEvent: false });
      }
    });
  }
}

模板代码保持你原来的写法即可：

<mat-slide-toggle
    formControlName="compression"
    class="margin-top">
    {{'compression' | translate}}
</mat-slide-toggle>

方法二：自定义指令（复用性更高） #

如果你希望像示例中那样通过自定义属性forcedTrue来控制，可以创建一个Angular指令，这样能在多个组件中复用该逻辑。

1. 创建自定义指令 #

import { Directive, Input, HostListener } from '@angular/core';
import { MatSlideToggle } from '@angular/material/slide-toggle';

@Directive({
  selector: '[forcedTrue]'
})
export class ForcedTrueDirective {
  @Input() set forcedTrue(condition: boolean) {
    this._forcedTrue = condition;
    // 如果条件变为true且当前开关是false，立即恢复为true
    if (condition && !this.slideToggle.checked) {
      this.slideToggle.checked = true;
      this.slideToggle.control?.setValue(true, { emitEvent: false });
    }
  }
  private _forcedTrue: boolean = false;

  constructor(private slideToggle: MatSlideToggle) {}

  // 监听开关的change事件
  @HostListener('change') onToggleChange() {
    if (this._forcedTrue && !this.slideToggle.checked) {
      // 强制将开关设回true
      this.slideToggle.checked = true;
      // 同步FormControl的值（如果绑定了的话）
      this.slideToggle.control?.setValue(true, { emitEvent: false });
    }
  }
}

2. 在模块中声明指令 #

确保在你的NgModule中声明这个指令：

import { NgModule } from '@angular/core';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { ForcedTrueDirective } from './forced-true.directive';

@NgModule({
  imports: [MatSlideToggleModule],
  declarations: [ForcedTrueDirective],
  exports: [ForcedTrueDirective]
})
export class YourMaterialModule {}

3. 在模板中使用 #

现在就可以直接用你想要的写法了：

<mat-slide-toggle
    formControlName="compression"
    class="margin-top"
    [forcedTrue]="someCondition">
    {{'compression' | translate}}
</mat-slide-toggle>

额外选项：禁用开关（如果允许用户无法操作） #

如果你的场景允许直接禁用开关，而不是让用户点击后恢复，也可以直接使用disabled属性：

<mat-slide-toggle
    formControlName="compression"
    class="margin-top"
    [disabled]="someCondition">
    {{'compression' | translate}}
</mat-slide-toggle>

这种方式下开关会变成灰色，用户无法点击切换，适合不需要用户触发切换动作的场景。

内容的提问来源于stack exchange，提问作者Surya Teja