Angular 13 Unable to disable mat-slide-toggle

[lapis osprey]

Why can’t I disable a mat-slide-toggle using
form.controls.controlname.disable()

I see in the breakpoint in browser that its state is being set as disabled but the the element itself in html isn’t disabled

I tried updating value and validity and doing a changedetector check. Neither work.

Feels like there’s no way out but to use html disabled attribute. I do hate that obnoxious warning though in console.

[hollow pollen]

Are you setting the form control on the slide toggle component?

If you could provide some more code, or reproduce it in StackBlitz, I can probably help you resolve this issue.

[lapis osprey]

I did create a reactive form and declare it. And yes to that question.

I can provide in an example in about an hour.

Thanks for responding

[hollow pollen]

So you do have something like <mat-slide-toggle formControlName="controlName">?

[lapis osprey]

sorry i got busy

and yes i do

in the same form i had matinputs that were disabling fine

but mat-slide-toggle was the one that would no matter what i did disable on the UI side

interesting

when i make an example on stackblitz it works

now i wonder why it didnt work where i was trying it to work

creating an example

hmm its working here too.
I guess nevermind. Ill have to investigate further on why its happening on my end

https://stackblitz.com/edit/4vpzf5?file=src%2Fapp%2Fslide-toggle-overview-example.ts

[lapis osprey]

Ok I’ve recreated the example

https://stackblitz.com/edit/4vpzf5-nt6vlu?file=src%2Fapp%2Fslide-toggle-overview-example.ts

Can you explain why this doesn’t work?

It disabled the input but not the toggle

Moving the disable for the mat slide toggle above the set form works but that doesn’t make sense to me

But if you move the input disable above it too then the input doesn’t disable

[hollow pollen]

I think something funky is happening here with the change detection because you are replacing the form object with a new form and then updating controls every time an input changes.

What is the reason for needing to create a new form every time a value is changed? Removing that code works just fine.

https://stackblitz.com/edit/4vpzf5-nt6vlu?file=src%2Fapp%2Fslide-toggle-overview-example.ts

[lapis osprey]

I’m basically changing data in it with a mat select change based on selection

It’s why I do that. Unless there’s a better way to do that

[hollow pollen]

You can just update the function to only update the form once. You can do this by creating the new form into a variable, and then assigning it back to this.form after setting the disabled states.

selectValueAction($event: any) {
    console.log($event);

    const form = this.setForm(this.form, {
      selectValue: this.form.controls.selectValue.value,
      toggle: this.form.controls.toggle.value,
      someInput: this.form.controls.someInput.value,
    });

    if ($event.value === '1') {
      this.form.controls.toggle.disable();
      this.form.controls.someInput.disable();
    } else {
      this.form.controls.toggle.enable();
      this.form.controls.someInput.enable();
    }

    this.form = form;
  }

For performance improvements, the form property should be an observable or signal.