mat-slide-toggle: does not always follow formGroup initialization state

[kdrvn]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Given I have a form group with a slide toggle set as disabled: true
When recreating the form group with the slide toggle set as disabled: false
Then the slide toggle should be enabled.

Given I have a form group with a slide toggle set as disabled: false
When recreating the form group with the slide toggle set as disabled: true
Then the slide toggle should be disabled.

What is the current behavior?

After first form group initialization, the slide toggle state isn't affected by the disabled setting in subsequent form group initialization.

What are the steps to reproduce?

In an Angular component, with a formGroup:

this.formGroup = this.formBuilder.group({
  input: [{value: '', disabled: false}],
  slideToggle: [{value: '', disabled: false}]
});

And a form template:

<form class="example-form" [formGroup]="formGroup">
  <input matInput formControlName="input" />
  <mat-slide-toggle formControlName="slideToggle">Slide Toggle</mat-slide-toggle>
</form>

At any point during the lifetime of the component, recreate the form group but with a different disabled state for the controls:

this.formGroup = this.formBuilder.group({
  input: [{value: '', disabled: true}],
  slideToggle: [{value: '', disabled: true}]
});

The input will have correctly changed disabled state, however the slide toggle will not.

https://stackblitz.com/edit/angular-material2-issue-slide-toggle

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.4.6
Angular Material 2.0.0-beta.12
tested in Chrome

Is there anything else we should know?

Similar issues: #4774 (fix: #4797)

[kdrvn]

This issue is present for any custom form component in angular material.
Issue observed with:

• checkbox,
• datepicker,
• radio button,
• select,
• slider,
• slide toggle.

Stackblitz with all material form controls: https://stackblitz.com/edit/angular-material2-formgroup-issue

[willshowell]

This sounds pretty similar to #6849. Note that using the .enable()/.disable() apis from FormControl do still work. The problem arises when you reassign the FormGroup.

I guess one of the differences is, in your all control example, the input/autocomplete/datepicker controls do get disabled, they just don't run change detection until you click on them. The other controls do not disable at all.

[jelbourn]

@tinayuangao can you investigate this? @kara should be able to help with forms-related questions

[tinayuangao]

This is related to forms. The ControlValueAccessor's setDisabledState method is only called in initialization, or when the disabled value is changed to true in FormControl.

https://github.com/angular/angular/blob/a176cd646c63dd3cdbcb3b593e15da2d8b1bd975/packages/forms/src/directives/reactive_directives/form_control_directive.ts#L92
https://github.com/angular/angular/blob/b14c2d1568f9cc634c18fe1ee77a647aa57a012a/packages/forms/src/directives/reactive_directives/form_control_name.ts#L152

[jelbourn]

@tinayuangao is it working as intended, then?

[tinayuangao]

Yes.
Disabling doesn't work yet with re-assigned form groups. Once forms support that our components implementing ControlValueAccessor will support it.

The input component support disabling because the input component read the disabled variable of ngControl.

[tinayuangao]

Close this issue for now.

Please feel free to reopen when angular forms supports it.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}