角垫滑动切换和数字输入

【问题标题】：Angular mat-slide-toggle and numeric input角垫滑动切换和数字输入
【发布时间】：2021-03-17 00:10:48
【问题描述】：

我有以下 Angular 代码：

        <mat-slide-toggle formControlName="device_maintenance_mode"
            [(ngModel)]="isChecked">Maintenance Mode : {{isChecked}}
        </mat-slide-toggle>
        <mat-form-field fxFlex class="mat-block">
            <mat-label>Number of Maintenance DAYS</mat-label>
            <input type="number" step="any" matInput
                    formControlName="device_maintenance_days">
            <mat-error *ngIf="editEntityFormGroup.get('attributes').get('device_maintenance_days').hasError('required')">
                Days number is required.
            </mat-error>
        </mat-form-field>

我想做的是：

当用户将mat-slide-toggle的值改为true时，输入控制device_maintenance_days 必须启用，并且它的值必须设置为 0

当用户将mat-slide-toggle的值改为false时，输入控制device_maintenance_days 必须禁用，并且它的值必须设置为 0

你能帮帮我吗？

【问题讨论】：

标签： angular

【解决方案1】：

你的mat-slide-toggle

<mat-slide-toggle 
   formControlName="device_maintenance_mode"
   (toggleChange)="toggleChange()"
   [(ngModel)]="isChecked">Maintenance Mode : {{isChecked}}
</mat-slide-toggle>

你的input

<input type="number" step="any" matInput formControlName="device_maintenance_days" [disabled]="isChecked">

你的toggleChange() 在你的component.ts

toggleChange() {
  isChecked = !isChecked;
  this.device_maintenance_days.patchValue(0);
}

您不必在 mat-slide-toggle 中对您的 isChecked 进行 2 路绑定

您的输入将根据您的 isCheck 值被禁用

【讨论】：