Text field input validation and errors support needed

[miguelchico]

Hi,

First of all, excelent library.

I have a question about form validation.

How could I add an input text styles when validation fails ?

[ThomasBurleson]

@miguelchico The Text field components are still in-progress. In the near future you will see versions for all as specified Text field

[miguelchico]

Thank you very much Thomas.
I assumed that but was not 100% sure.

Thank you again.

Great work!!

[ThomasBurleson]

I will reopen this issue so we can track this important "Text field Validation and Errors" feature.

@miguelchico Thank you for great questions.

[ivan7237d]

One related issue: if the input has for example type="number", and user types in something invalid like "aaa", the component thinks that the field is empty and does not pull up the label, so that the label and the contents overlap.

[ThomasBurleson]

@ivan7237d - that is a bug. I created a separate issue #575 to track.

[ivosantiago]

Hey @ThomasBurleson , are there specifications in terms of code how do you guys expect this to be done? Will the user be able to set the error message as a text field attribute?

I'm thinking about doing some validation for text field and text float as well. What are your thoughts?
Thanks

[EladBezalel]

+1

[d-sko]

👍

[demisx]

+1

[ziaukhan]

+1

[ajoslin]

Not actually done.. we don't yet support the error styles seen in the spec.

[dasmith]

With the new md-input-container format introduced in v0.7.0-rc2, the following class will put a red line under invalid inputs:

input.md-input.ng-invalid.ng-dirty {
  outline: none;
  border-bottom:2px solid #DC4A3D;
  width:100%;
}

But to fully realize Google's input error spec, another error label must appear below the text input with an error message.

[EladBezalel]

@dasmith The error below can be easily appear when the model of the input has error and can be accessed via $error and with the right classes or maybe a directive it can be beautiful and elegant code 😄

[ajoslin]

I'm writing this now. If you include the ngMessages module, it will all be handled and look good for you. https://docs.angularjs.org/api/ngMessages

<form name="userForm">
  <md-input-container flex>
    <label>First Name</label>
    <input ng-model="user.firstName" name="firstName" minlength="5" required>
    <div ng-messages="userForm.firstName.$error" ng-if="userForm.firstName.$dirty">
      <div ng-message="required">That's required!</div>
      <div ng-message="minlength">Too short...</div>
    </div>
  </md-input-container>
</form>

Video: http://ajoslin.co/1437s

[EladBezalel]

@ajoslin This is awesome!

[tarex]

@ajoslin awesome , just tried , its working really great but in my end, css of the error message is not as like your video , is possible to share the code ?

[demisx]

@ajoslin Awesome! Please share CSS for the video as well.

[PaulMougel]

Looks really good 👍 Congrats for the great job.

[ajoslin]

There's still some polish and documentation left to do before its ready to
commit. It'll be up within the next few days.
On Thu, Jan 8, 2015 at 13:42 Paul Mougel notifications@github.com wrote:

Looks awesome [image: 👍] Congrats for the great job.

—
Reply to this email directly or view it on GitHub
#372 (comment).

[demisx]

@ajoslin I will name my next son Andrew.

[EladBezalel]

@ajoslin waiting for it! @demisx lol 😄

[ajoslin]

Lol @demisx, I'm honored!

More teasers...

All defined by an md-maxlength attribute, which hooks up to ngModel the way any validator does.

[demisx]

Sweet and exciting. 👍

[louisdmli]

Awesome!

[demisx]

@ajoslin If I want to make <label>s appear differently for the required fields, do I need to do it the old CSS way, i.e.

<label class="required">Some required label</label>

or is there a better material way?

[ajoslin]

There's no way at the moment, and nothing in the spec.

If you come up with some great CSS I'd love to see it though, and maybe we'll implement it.

[trufrgs]

Hi, is there a way to avoid the need to write the same validation message dozen of times for different inputs? I mean, is possible to create default messages that are used for all the required fields, for example, without need to write the same ng-message for every single one?

Anyway the current input validation is great, just asking if its possible to improve it :).

[Frank3K]

@trufrgs: see this yearofmoo post.

[trufrgs]

Thanks a lot @Frank3K

[ThomasBurleson]

@matsko writes excellent code and blog tutorials. Using ng-Messages is a great resource.
You may also want to read Exploring the Validator Pipeline by @PascalPrecht.

[0x-r4bbit]

@ThomasBurleson <3

[brettstack]

So awesome. Can't wait :D

[demisx]

+1 for @PascalPrecht blogs. One of the best written angular resources.