Skip to content

form outouched status and checkboxes #14980

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jscti opened this issue Jan 28, 2019 · 4 comments · Fixed by #15001
Closed

form outouched status and checkboxes #14980

jscti opened this issue Jan 28, 2019 · 4 comments · Fixed by #15001
Assignees
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@jscti
Copy link

jscti commented Jan 28, 2019

Form with a mat-checkbox and a submit button (disabled when form untouched).
Form button don't get enable shen clicking on checkbox.

What is the expected behavior?

After clicking (only) the checkbox, the submit button (disabled when form untouched) should be enabled. But it stays disabled, even when clicking outside..

What is the current behavior?

Submit button stay disabled, even if user click outside.

What are the steps to reproduce?

See this repro stackblitz : https://stackblitz.com/edit/angumar-material-checkbox-yriwet?file=app/checkbox-overview-example.html

User lands on a form where he can update its address.
Form submit button is flaged as disabled has long as the user doesn't interact with the form.
User want to modify only the checkbox without touching the "name" field, but the "submit" button will never get enabled because the checkbox seems not to have lose focus.
Even if clicking outside the checkbox, the focus isn't losen.. only option to be able to submit this form : click 3 times the checkbox ... or click in the text field before submiting..

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

(version on stackblitz may not be up to date but on my project, it is) :
angular / angular-material : 7.2.1
mac OS 10.14.2 / Chrome 71.0.3578.98

Is there anything else we should know?

I understand the rule "touched" is applied only on blur(); but in this case it looks more like a bug.

@djleonskennedy
Copy link

@jscti may be [disabled]="form.invalid" can be used as workaround

@jscti
Copy link
Author

jscti commented Jan 28, 2019

@djleonskennedy Yeah I know but it's the touched/untouched status that I need. In my app the button is disabled on multiple condition, and form.invalid is indeed working well. The stackblitz repro is as simple as possible to "show" the bug

@djleonskennedy
Copy link

@jscti seems problem with checkbox's valueAccessor :(

@crisbeto crisbeto self-assigned this Jan 29, 2019
@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent has pr labels Jan 29, 2019
crisbeto added a commit to crisbeto/material2 that referenced this issue Jan 29, 2019
…change detection

Fixes a checkbox which is blurred inside a component with `OnPush` change detection not being marked as touched.

Fixes angular#14980.
mmalerba pushed a commit that referenced this issue Jan 30, 2019
…change detection (#15001)

Fixes a checkbox which is blurred inside a component with `OnPush` change detection not being marked as touched.

Fixes #14980.
mmalerba pushed a commit that referenced this issue Feb 4, 2019
…change detection (#15001)

Fixes a checkbox which is blurred inside a component with `OnPush` change detection not being marked as touched.

Fixes #14980.
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 10, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
3 participants