feat(MatCheckboxModule): add an option to toggle() to mark control as dirty/non-pristine

[NorseJedi]

Reproduction

Steps to reproduce:

Programatically change a MatCheckbox in the component typescript-file using the toggle() method

See https://stackblitz.com/edit/angular-ivy-a5lgux

Expected Behavior

The checkbox (and the form) should be marked as dirty=true and pristine=false.

Actual Behavior

The checkbox (and form) remains unchanged marked as pristine=true and dirty=false.

Environment

• Angular: 10.2.3
• CDK/Material: 10.2.6 (also tested with 11.0.0)
• Browser(s): Chrome 86.0.4240.193 (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu 20.10 WSL in Windows 10

[crisbeto]

I believe that this is working as expected. We've been following the approach where we only mark things as touched or dirty if the value was changed by the user, rather than programmatically.

[NorseJedi]

For "touched" that makes sense, but for "pristine" and "dirty" that seems counter intuitive to me. Still, if it's intentional then it's intentional, but is it also intentional that the value of the control object remains unchanged?
I updated the stackblitz now, it shows true or false for the value only if the checkbox is manually changed, not when changed with toggle().

[NorseJedi]

I solved the specific issue where I ran into this by replacing elm.toggle() with elm._inputElement.nativeElement.click() but that feels like a very hack-ish solution. I was however unable to find any other simple way to update the formcontrol programatically (or rather, updating it wouldn't be the problem, but accessing it from the matcheckbox element was).

How about adding an optional argument to toggle() to allow it to behave as if the box was clicked if the parameter is set to true?