Question

我有两个带有两个滑块的输入字段。我想做的是，当我启用一个Slidetoggle时，该Slidetoggle上的相应字段被启用，而第二nd slidetoggle和第二nd inputfield被禁用。

到目前为止，我已经尝试过：

当我单击slidetoggle时，它会更改第二个slidetoggle的状态，这又会禁用输入字段，但是当我发布其值时，其值仍会保存到数据库中：

这是我尝试过的代码：

HTML：

  <div class="input-field">
      <div>
          <mat-label>Count(Number) </mat-label>
          <mat-slide-toggle class="slide-right test" formControlName="count"  [(ngModel)]="Count" (ngModelChange)="onCountOptionSelect($event);selectedSize=!selectedSize"
                                    [checked]="isChecked"></mat-slide-toggle>
      </div>

      <div>
          <mat-form-field class="csd-input-field" appearance="outline">
              <input matInput type="number" class="input" placeholder="Enter Count" value="1" formControlName="count" [readonly]="countInputDisabled">
          </mat-form-field>
          <mat-label>Max: 100</mat-label>
      </div>
  </div>
  <div class="input-field">
      <div>
          <mat-label>Size(KB) </mat-label>
          <mat-slide-toggle class="slide-right" formControlName="size"  [disabled]="test" [ngModel]="selectedSize"  ></mat-slide-toggle >
      </div>
      <div>
          <mat-form-field class="csd-input-field" appearance="outline">
              <input matInput type="number" class="input" placeholder="Enter size"   value="1" formControlName="size" [readonly]="sizeInputDisabled">
          </mat-form-field>
          <mat-label>Max: 1000KB</mat-label>
      </div>
  </div>

TS文件

onCountOptionSelect(selectedCountVal) {
    
  if (selectedCountVal == true) {
    this.countInputDisabled = false;
    this.sizeInputDisabled = true;
    this.test=false;
  } else {
      
  }
  this.countInputDisabled = true;
  this.sizeInputDisabled = false;
  this.test=true;
}

如果有人有任何想法如何使文本字段与matslidetoggle结合使用，请帮助

在MatSlideToggle更改上控制输入字段

0 个答案: