如何使用 mat-slide-toggle 禁用角度输入字段？

Question

如何在反应形式中使用mat-slide-toggle禁用角度 mat-form-field(input) 字段，当输入字段上的滑动切换为 true 时，应启用它，否则应禁用输入字段。

Answer 1

您可以在mat-slide-toggle上使用change方法作为

    <mat-slide-toggle 
      (change)="changeDisable()" formControlName="enableWifi">
      Enable Wifi</mat-slide-toggle>
<mat-form-field class="demo-full-width">  
        <input [disabled]="checked" formControlName="FirstName" matInput
         placeholder="First Name">  
 </mat-form-field> 

changeDisable() {
  if (this.formGroup.controls['FirstName'].disabled) {
   this.formGroup.controls['FirstName'].enable() ;
  } else {
    this.formGroup.controls['FirstName'].disable() ;
  }

}

Stackblitz 演示显示输入禁用/启用更改垫切换

Answer 2

请试试这个

在 HTML 中：

<mat-slide-toggle (change)="toggle($event)">Slide me!</mat-slide-toggle>
<input [attr.disabled]="show ? '' : null"/>{{show}}

在 ts：

    show: boolean = false;
    toggle(e: any) {
      e.checked? this.show = true: this.show = false;
    }