-
Notifications
You must be signed in to change notification settings - Fork 6.8k
Strange mat-error & state behaviour on Custom ControlValueAccessor component #7920
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
Comments
Maybe I am misunderstanding your issue, but is it not simply that the |
@benelliott No, the Although I now see that that is not behaving as expected, and will only show the error when the field is empty, and required set. When I type in an incorrect email, it will still not show the error, whether I set So now my question really becomes, How do I make the I think it must also be something with the implementation of this component, because The first instance will each time not show the |
required
attribute is set
@mxchange What I mean is that the The "works without required" example you provided actually does have the |
@mxchange is this still an issue or were you able to resolve it? updated plunker: https://plnkr.co/edit/zMrtVVmxi7O9Aej4gLl1?p=preview |
@mmalerba not really, can you explain why the first input field is not showing the error, while it has the same |
@mmalerba |
@mxchange Does this issue resolved for you? |
@divyameher no |
@mxchange Did you read my comment above? Is there something I misunderstood about your use case? |
I have the same issue with a custom form field...the error won't show |
I solved by updating the Since my custom field is a
I call this function when either input is focused EDIT There was also a problem with the reset and errors won't be reset.
|
@tonysamperi So does your Custom form field is only compatible with |
@divyameher Works perfectly also with NgModel! |
@tonysamperi could you show a working example of your workaround? Sorry I get confused with some part of your code but my custom form field control also consists of inputs (3 inputs) |
@nhducseuit sorry, but I really can't prepare it right now... If you prepare a stackblitz maybe I can take a look... |
Any updates on this? |
It is still an issue. |
Hello, I have the same problem, I see this has been active since 2017, any idea or plan to fix this or anyone know a workaround to show the mat error when the form field is not required? Thanks in advance. |
Also experiencing really similar issue. |
Uh oh!
There was an error while loading. Please reload this page.
Bug
I have this custom input component, using
ControlValueAccessor
and it is perfectly in sync with the controlling formGroup, and gives thevalid
,invalid
,touched
andhasErrors('required')
to the formGroup & internally correctly.What is the current behavior?
Whenever i want to use the
mat-error
component, it will only work as expected when I give therequired
attribute to theinput
. When I leave that out, themat-error
will never show, whatever I try. So on blur (touched=true
) it will not show themat-error
. But it does in this simple plunkr: https://plnkr.co/edit/cJFCUITMlcBc78v06937?p=previewI'm not sure why this is, the only thing I can think of is that I use
[(ngModel)]="_value"
on the input i.c.w.NG_VALUE_ACCESSOR
/ControlValueAccessor
, but I would think that since the formGroup state is correct, and it all works perfectly when having therequired
property on it, this should be irrelevant.Looking at this @crisbeto's answer: #4027 Point 1 seems to be saying a similar thing, that setting
required
on it, it works, and towards the end @willshowell statesErrors are hidden until the input is both invalid and touched
yet they are both invalid and when touched still don't show it.What is the expected behavior?
I would expect the
required
to not be relevant to showing themat-error
element. For example, I might want to validate an email withValidators.email
but have it optional.What are the steps to reproduce?
This plunkr demonstrates it by simply clicking and blurring each input field: https://plnkr.co/edit/4B2OOc5Spv9ewxbeIndZ?p=preview
Although While recreating it in plunkr, I found out some new strange behaviour. The first instance of the component doesn't seem to apply the
placeholder
attribute, and also doesn't change thetouched
state; however this problem has not occurred on my project (yet). See: https://plnkr.co/edit/FODeH4ZhE7IG01dmYCiR?p=preview This does indicate something strange going on, and I cannot figure out what it is.What is the use-case or motivation for changing an existing behavior?
I would expect
required
not to be required format-error
to work.Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Is there anything else we should know?
mat-error
.mat-error
like:<mat-error error>{{ getError() }}</mat-error>
and then<ng-content select="[error]"></ng-content>
But then it is placed wrongly and will always show the error, probably would not fix this issue either.Injector
&NgControl
and subscribing tostatusChanges
and could see the internal status is correct as well.The text was updated successfully, but these errors were encountered: