CODEWITHSUNDEEP
angulartypescriptangular-materialangular-material2
PING_LORD
PING_LORD

Reputation: 11

Change mat-slide-toggle value from TS code

I have such HTML code for mat-slide-toggle element

<span class="form-control form-control-plaintext">
              <mat-slide-toggle name="status" checked=""
                              formControlName="status" #status>
              <label *ngIf="!formGroup.get('status').value" (click)="toggleStatus(status)" style="margin: 0">Status: Disabled</label>
              <label *ngIf="formGroup.get('status').value" (click)="toggleStatus(status)" style="margin: 0">Status: Active</label>
            </mat-slide-toggle>
</span>

This is inside toggleStatus() function

toggleStatus(status) {
    status.checked = !status.checked;
}

This works fine but only for visual checkbox, it doesn`t change form control value. How do I make form control value change when I click on label?

Upvotes: 0

Views: 2123

Answers (1)

sombrerogalaxy
sombrerogalaxy

Reputation: 396

You can change the form control value through the form control.

  public changeValueThroughFormControl(): void {
    const fc = this.formGroup.get("status");
    fc.setValue(!fc.value);
  }

But if you are using the reactive style form anyways, then you don't actually need a toggleStatus method. A click by the user will automatically change the value of the form control. See this stackblitz (Open the console and click either the button or the slide toggle).

Upvotes: 1

Related Questions