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

Question

我尝试使用由 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>

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

Answer 1

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

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

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

Answer 2

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

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

现在它应该可以正常工作了。

STACKBLITZ DEMO

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

Observe a FormControl value to disable a mat-slide-toggle

rxjs

typescript

angular