Material: mdMaxlength: Using mdMaxlength shows field with spaces as valid

[varunis]

From demo page:

This is unlike ng-maxlength where input with only spaces is invalid.

[gkalpak]

It is not exactly an ngMaxlength vs mdMaxlength issue. It has to do with the use of ngTrim.
I.e. you can achieve the same behaviour with ngMaxlength if you also use ng-trim="false" on the input.

The "problem" is that mdMaxlength, _forces_ ngTrim to false (source code), which:

1. Seems quite arbitrary.
2. Contradicts with the _default_ Angular behaviour.
3. Is not documented.
4. Provides no (straightforward) way for the developer to customize (i.e. disable).

This was in d6311e8 to address the issue reported in #1180, but I don't think this is the _right_ way to address the issue. Basically, the issue had nothing to do with mdMaxlength, but was related to how Angular by default trims (most) inputs' trailing whitespace.

IMO, the _proper_ way to address that issue should be the same as it is for addressing the same issue with "plain" Angular; namely let the developer add ng-trim="false" on the input.

[ThomasBurleson]

Will not fix.

[varunis]

@ThomasBurleson Any particular reason why it won't be fixed?

[jannisg]

@ThomasBurleson would love to know the reasoning here as well and possibly have this issue reopened as it really messes with the way Angular behaves by default.

It would be fine if this was the default but we could still set ng-trim="true" ourselves on the input but with this in place we are encountering server errors because we are sending empty white-space as the "title" for a post.

Example markup for a post form:

<label for="postTitle">Title</label>
<input md-maxlength="80" ng-model="postTitle" type="text" name="postTitle" id="postTitle">

and due to this behaviour we are sending the server:

{
  "postTitle": " "
}

which results in a server-side error as the server will not accept a white-space only title.

If this is supposed to be the way Angular Material handles this scenario it would at least be good to know why and what the solution is to the example above where Angular's native ng-trim would usually give the developer control over this scenario.

[gkalpak]

@jannisg, although I also believe this is not the correct behaviour (as detailed in https://github.com/angular/material/issues/1794#issuecomment-77345094), the ngMaterial team has decided to leave things as is.
(And while it's not clear why, I do trust them to have made the best decision (for the time being) - all things considered.)

In the meantime, there are a few _work-arounds_ that one can utilize:

1. Create a custom directive that trims the input's value.
2. Overwrite the value that mdMaxlength sets ngTrim to, by means of ng-attr-....
3. Augment the mdMaxlength directive (basically define a second directive with the same name), that automatically overwrites the value of ngTrim, setting it to true. (This is the same as (2) with the exception that the behaviour is automatically applied to all [md-maxlength] elements, without the need of explicitly setting ng-attr-....)

All above solutions are illustrated in this pen.

[jannisg]

@gkalpak Thank you very much for your feedback. Extremely helpful! Specially like solution 3 in this case.

[bshir]

@gkalpak thank you for your response. Another solution is to use
ng-pattern="/\S/" and then set <div ng-message="pattern">This is required.</div>

I agree with others that this does not feel like the appropriate behavior. Any insight as to why this was chosen would be very helpful. If there is a particular case for this then it would be worthwhile to know and understand.

[kevinleeTCA]

@gkalpak the 2,3 solution won't work properly, if we wanna input required, the input can still be pure spaces only, and can pass the validation. If you inspect the input element in browser, it still show ng-trim= 'false', I guess required and md-maxlength/md-minlength can not be put together

[gkalpak]

@kevinleeTCA, the provided workarounds are for getting mdMaxlength to work as expected. They are not guarranteed to work for ngRequired or any other directive. (Approach 1 should still work for most usecases.)

[kevinleeTCA]

@gkalpak Thanks for the comments, that is correct, mdMaxLength will work as expected but not requried. requrired input element should not add md-maxlength, if empty spaces string is not allowed.

[saranshbansal]

This is a definite bug, not a feature and must be fixed. Using a workaround doesn't make any sense.

[samal-rasmussen]

So what do I do if I want md-maxlength, ng-trim, and required?

[samal-rasmussen]

I see you're trying to fix my issue here @Splaktar: https://github.com/angular/material/pull/11136

Thanks a lot!

[Splaktar]

Yes, this is being addressed in PR https://github.com/angular/material/pull/11136 as part of fixing https://github.com/angular/material/issues/10082. However, I'm having some issues with the unit tests failing on AngularJS 1.5.x. It would be helpful if someone could take a quick look and let me know if they have any ideas for what might be causing these failures.

[gkalpak]

On it :smiley: