0

I have two input fields with two slidetoggles. What I want to do is when I enable one slidetoggle, the respective field on that slidetoggle gets enabled and the 2nd slidetoggle and 2nd inputfield gets disabled.

Till now I have tried this:

When I click on slidetoggle it results in changing the state of 2nd slidetoggle which in turn gets the input field disabled but when I post its value its value still gets saved to database:

Here's the code I've tried:

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 File

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

If anyone has any ideas how to get the text fields working in conjuncture to matslidetoggle, please help

Anand Trivedi
  • 123
  • 6
  • 15
  • Did you try [attr.disabled] instead of [readonly]? See this post: https://stackoverflow.com/questions/42179150/how-to-disable-a-input-in-angular2/43765804 – Sebastian Denis Jul 27 '18 at 05:33
  • @SebastianDenis I am not able to disable the input field dynamically then. since att.disabled needs enabled or disabled instead of true or false – Anand Trivedi Jul 27 '18 at 05:50
  • Not sure if it's only in your sample code or not, but your `else` clause is closing before you are performing its logic. Have an extra look at the curly brackets in you questions sample code – Fredrik Lundin Jul 27 '18 at 06:18
  • @FredrikLundin ya it was a typo I fixed the bracket the problem is still there – Anand Trivedi Jul 27 '18 at 06:24
  • You are using both reactive and template driven forms, `[(ngModel)]`(template), and `formControlName` attribute (reactive). You shouldn't mix those – Fredrik Lundin Jul 27 '18 at 06:42

0 Answers0