如何使用 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;
    }