Reputation: 9839
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
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
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