components: md-error with *ngIf doesn't work
Bug, feature request, or proposal:
Bug
What is the expected behavior?
boolean is passed to *ngIf and supposed to switch on when it is true
What is the current behavior?
md-error with *ngIf doesn’t work at all. It only responds on predefined directives like required.
What are the steps to reproduce?
<md-input-container> <input mdInput [(ngModel)]="sample" name="sample" (keyup)="validateInput()"> <md-error *ngIf="isError">{{errMsg}}</md-error> </md-input-container>
Validate input on every keyup and set isError to true if the input is invalid.
What is the use-case or motivation for changing an existing behavior?
Which versions of Angular, Material, OS, browsers are affected?
angular 4.0.0, material 2.0.0-beta.3, macOS10.12.4, chrome
Is there anything else we should know?
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 3
- Comments: 29 (12 by maintainers)
I have problems making Reactive form with FormGroup display
md-error
.md-hint
works with the same code.Here’s a code and a working plunker: http://plnkr.co/edit/CR06nY?p=preview.
All validations work except the custom one. My workaround for now is to just use 'md-hint` with red font.
Take a look at last two inputs. Password validation error doesn’t appear.
+1 to see this working with optional relying on
*ngIf
, since the purpose of themd-error
is quite trivial.That would be useful for the server-side validation reflection.
Alright, thanks to your help i managed to figure it out, and can also say that it is working as intended. In short what i have done:
Create a custom validator
Added it to my declarations:
And used it for something:
I thank you for your time, especially since it was a user error.
@whitebyte AFAICT by reading through this thread, there are no bugs with using
*ngIf
, just a misunderstanding of howmd-error
works.invalid
andtouched
md-error
inng-container
, but it is expected behavior and easy to workaroundThere a couple of issues with your examples:
ngIf="true"
(you can remove this btw), doesn’t have any validation set up. If you add arequired
attribute it’ll work.#emailInput
refers to the DOM element, not the instance ofngModel
. You can get it working by changing it to#emailInput="ngModel"
.Here’s a forked Plunkr with the above-mentioned changes. Note that to enable Angular’s built-in email validation, you have to add the
email
attribute.@willshowell I tried that example with the following
With my Confirm Password I also have a
required
, so I want therequired
to show if it is empty and the mismatch to show when the passwords are different, but hidden when the passwords are the same. I can’t seem to achieve this logic in the error matcher. What I have above works for the password matcher but ignores the required. If I removecontrol.parent.hasError("passwordMatchValidator")
then the required shows but not the mismatch, so I can get one of them but not both.So I updated the
return
to bereturn (hasInteraction && (control.hasError("required") || control.parent.hasError("passwordMatchValidator")));
Is this the best way of doing this?
@willshowell thank you for the summary. While I understand that this is intended behavior, this is counter-intuitive and leads to obscure errors. I hope devs will change their mind on this issue.