Material: input: md-maxlength validation doesn't happen on initialization

[jessika]

Actual Behavior:

• What is the issue? * Using md-maxlength="MAX" on an input field that initializes to some value of length > "MAX", the md-maxlength validation does not happen, and the input field is considered valid.
• What is the expected behavior? The input field to be considered invalid on initialization.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: http://codepen.io/jessika/pen/MJvxKE
• Details: I created two input fields, one using md-maxlength for character limit validation, and one using ng-maxlength. Both have the same initial values and same character limit. You should be able to see that the field using md-maxlength is still valid and the field using ng-maxlength is marked invalid. I would expect that both fields be invalid.

Angular Versions: *

• Angular Version: 1.5.5
• Angular Material Version: 1.1.1, 1.1.0

Additional Information:

• Browser Type: * Chrome
• Browser Version: * 56.0.2924.76 (64-bit)
• OS: * Ubuntu
• Stack Traces: N/A

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[mbarakaja]

I have this same issue with AngularJS Material 1.1.6 and AngularJS 1.5.10.

[Splaktar]

Verified that this issue still exists in 1.1.7. Updated CodePen here.

[feloy]

I'm investigating on this issue. The maxlength validator is not executed because the input value is set before the md-maxlength directive is registered; but I can't find a way to run the validator on the existing value on directive initialization... Any trick to help me?

[Splaktar]

Perhaps this is due to waiting until $mdUtil.nextTick to register the validators(https://github.com/angular/material/blob/master/src/components/input/input.js#L667-L676). Does the initialization work better if those validators are registered immediately (and not in nextTick)?

[feloy]

@Splaktar You're right, moving the validator registration outside the nextTick resolves the problem. Thanks!

Furthermore, it is necessary to get the attr.mdMaxlength value directly because the scope.$watch(attr.mdMaxlength, ...) arrives after the validator registration but the validator needs this value.

[brianrodecap]

This issue does not appear to be fixed in 1.1.8, per CodePen by @jessika and my own experience with 1.1.9.

[Splaktar]

@brianrodecap it looks like the fix only works with non-interpolated values which isn't ideal. Can you please open a new issue that specifies that detail? You can use this updated CodePen as the demo.

@feloy it looks like we missed one test case here.