观察 FormControl 值以禁用 mat-slide-toggle答案

【问题标题】：Observe a FormControl value to disable a mat-slide-toggle观察 FormControl 值以禁用 mat-slide-toggle
【发布时间】：2022-01-18 03:42:56
【问题描述】：

我尝试使用由 FormControl 控制的表单来控制 mat-slide-toggle。这意味着我的 mat-slide-toggle 的 disabled 属性取决于 FormControl 值。更准确地说，如果没有设置 FormControlValue，我想禁用切换。

表格如下：

<mat-form-field>
  <mat-label i18n="@@main.level">Level</mat-label>
  <mat-select [formControl]="levelControl" >
     <mat-option *ngFor="let level of levelList" [value]="level.value">
       {{level.viewValue | titlecase}}
     </mat-option>
  </mat-select>
</mat-form-field>

我不能直接使用 levelControl.value 来设置是否禁用我的切换，因为此切换会生成一个动态组件，并且此方法会生成 ChangedAfterItHasBeenChecked 错误。

所以我在我的组件中定义了一个 Observable：

disableToggle: Observable<boolean>;

ngOnInit() {
  this.disableToggle = this.levelControl.valueChanges.pipe(filter(next => next.level === ''));
}

我将它用于切换如下：

<mat-slide-toggle [disabled]="(disableToggle | async)"> </mat-slide-toggle>

但没有任何反应，切换始终处于启用状态。有没有人有解决方案？感谢您的帮助！

【问题讨论】：

标签： angular typescript rxjs

【解决方案1】：

您可以使用 ReactiveForms 并将切换按钮添加到表单并绑定它。完成后，您可以收听以下更改：

form.toggle.value.subscribe((flag: boolean) => form.field.disable(flag));

如果您不使用响应式表单并且仅将 levelControl 作为 FormControl 类型的属性，则您需要为切换字段添加另一个，并且几乎与上述相同

【讨论】：

感谢您的帮助，我会看看这个解决方案

【解决方案2】：

您正在使用filter 实际过滤掉非值，因此它不会被禁用，因为如果没有值，过滤后代码将不会执行。您想要做的是改用map 并根据是否有值返回true 或false。下面我也用表单控件的当前值触发初始valueChanges：

ngOnInit() {
  this.disableToggle = this.levelControl.valueChanges.pipe(
    startWith(this.levelControl.value),
    map(value => value ? false : true)
  );
}

现在它应该可以按您的意愿工作了。

STACKBLITZ DEMO

【讨论】：

感谢您的帮助，此解决方案可以很好地禁用或不禁用切换按钮，但我关于 ChangedAfterItHasBeenCheckedErrors 的问题仍然存在。我的应用看起来不喜欢我将 *ngIf 放入动态组件容器