2014-12-03 1 views
2

Я хочу проверить, вводит ли пользователь ввод между 4-20 символами длины в md-text-float (директива углового материала), с явным угловым я бы просто вставьте атрибуты ng-minlength и ng-maxlength в тег, затем выполните проверку. Но в этом не работает. Как проверить, имеет ли текстовый float требуемую длину строки и активирует кнопку отправки?Проверка minlength и maxlength в md-text-float

<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> 

а затем включение.

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

ответ

1

На самом деле для мД-текста флоат директивы нг-minlenght и все не будет работать, валидация все еще продолжается, Вы можете увидеть ссылку также

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

Тем не менее, если вы хотите для проверки затем попытайтесь проверить его в самом контроллере для проверки валидации.

+0

Actaully, увидев этот пост https://github.com/angular/material/issues/872, я обнаружил, могут фактически реализовать функции ng-minlength и ng-maxlength, опустив префикс ng, я протестировал его, и он работает, но он чувствует себя немного хакерским, поэтому я просто подожду, пока не придет соответствующая поддержка. – svarog

+1

Да. Вы правы и благодарите за ссылку. Но я думаю, что без ng, если вы используете его, тогда он проверяет его на html5.So, до того, как начнется угловой запуск, браузер проверки начнет проверять поле. Это может привести к конфликту Я полагаю. – ramanathan

+0

Ничего, я не знал этого, я приму свой ответ и отредактирую его, как только будет проведена правильная проверка. – svarog

1

Если вы хотите проверить входные данные для материалов, я бы предложил использовать md-input-group напрямую, а не md-text-float (который использует внутреннюю группу md-input внутри), пока не будет поддерживаться проверка вне -Box. Я не мог сделать плункер для вас, так как сайт не работает - попытается сделать это позже, как только сайт будет резервным.

Но, чтобы дать вам представление о том, HTML, будет выглядеть примерно так: -

<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> 
+0

plnkr все еще работает, поэтому вот код: http://codepen.io/nbaleli/pen/JoXPVZ –

Смежные вопросы