svarog
svarog

Reputation: 9839

validating minlength and maxlength in md-text-float

I want to validate if the user is entering an input between 4-20 characters of length into a md-text-float (angular material directive), with plain angular I would just insert the ng-minlength and ng-maxlength attributes into an tag then validate. But in it doesn't work. How should I validate if the text float holds the required string length and enable the submit button?

<md-text-float label="password" data-ng-model="formPassword" 
                               data-ng-minlength="4" data-ng-maxlength="20" type="password" data-ng-required="true"></md-text-float>

and then enabling.

<md-button class="md-raised md-primary" data-ng-click="submitLogin()" data-ng-disabled="loginForm.$invalid">login</md-button>

Upvotes: 2

Views: 5405

Answers (2)

Abhishek Jain
Abhishek Jain

Reputation: 2977

If you want to validate material design inputs, I would suggest using md-input-group directly rather than md-text-float (which uses md-input-group internally), until it supports validation out-of-the-box. I couldn't do a plunker for you, as the site is down - will try to do later on, once the site is back up.

But to give you an idea, the html will look something like this:-

<div class="field" layout="column" layout-align="center center">
     <md-input-group>
           <label for="email">Email</label>
           <md-input type="email" id="email" name="email" required maxlength="50" 
                ng-model="loginVm.user.email"></md-input>
     </md-input-group>
     <span class="error-message email-error" ng-if="loginform.$submitted && loginform.email.$invalid">Please enter a valid email address.</span>
</div>

Upvotes: 1

ramanathan
ramanathan

Reputation: 104

Actually For md-text-float directive ng-minlenght and all will not work, validations are still in progress,You can see the link also

https://github.com/angular/material/issues/372

Still, if you want to validate then try to validate it in controller itself to handle validation.

Upvotes: 1

Related Questions