Material Design Pattern message?

Hello guys, I’m using ionic2 in a project, and want to know if the ionic 2 input components provides the material design message error and sucess pattern in some way? Or i need to create the style?

image

Thanks!

2 Likes

Hey, it currently does not, but I agree it is a nice feature to have. I created an issue for it but I can’t promise you a timeline of when it will be done. :smile:

https://github.com/driftyco/ionic2/issues/678

Take a look at this Angular document on forms for how to style them with CSS (section: Add Custom CSS for Visual Feedback): https://angular.io/docs/ts/latest/guide/forms.html

I did get around to adding some highlights to the MD inputs. These can be seen in alpha.39. An example of how to use them can be found here:

https://github.com/driftyco/ionic2/blob/master/ionic/components/text-input/test/form-inputs/index.ts
https://github.com/driftyco/ionic2/blob/master/ionic/components/text-input/test/form-inputs/main.html

And if you want to change any of the css the classes used are here:

https://github.com/driftyco/ionic2/blob/master/ionic/components/text-input/modes/md.scss#L27-L46

2 Likes

Super cool! =D
But the behavior on e-mail inputs I think is not right yet… the green inline is showed even without I put ‘@’ and ‘.’ in the field… How I can make this?

Thanks!

The only validation on the field is that it has a value, it is required. If you want to add email validation you will have to add a custom validator. This post has an example of it with the zipValidator: http://www.syntaxsuccess.com/viewarticle/forms-and-validation-in-angular-2.0

1 Like