验证 md-text-float 中的 minlength 和 maxlength答案

【问题标题】：validating minlength and maxlength in md-text-float验证 md-text-float 中的 minlength 和 maxlength
【发布时间】：2014-12-03 08:07:18
【问题描述】：

我想验证用户是否在 md-text-float（角度材料指令）中输入长度为 4-20 个字符的输入，使用纯角度我只需插入 ng-minlength 和 ng-maxlength 属性进入标签然后验证。但在它不起作用。我应该如何验证文本浮动是否包含所需的字符串长度并启用提交按钮？

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

【问题讨论】：

标签： angularjs material-design

【解决方案1】：

其实对于 md-text-float 指令 ng-minlenght 都行不通，验证还在进行中，也可以看链接

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

不过，如果您想验证，请尝试在控制器本身中验证它以处理验证。

【讨论】：

实际上，看到这个帖子github.com/angular/material/issues/872，我发现我实际上可以通过省略 ng 前缀来实现 ng-minlength 和 ng-maxlength 功能，我已经对其进行了测试并且它可以工作，但感觉有点老套，所以我会等到适当的支持到来。
是的。你是对的，谢谢你的链接。但我认为如果你使用它，如果没有 ng，那么它会通过 html5 进行验证。所以，在 Angular 启动之前，验证浏览器将开始验证字段。我猜这可能会导致冲突。
很好，我不知道，一旦有适当的验证，我会接受你的回答并编辑它。

【解决方案2】：

如果你想验证材料设计输入，我建议直接使用 md-input-group 而不是 md-text-float（它在内部使用 md-input-group），直到它支持验证外盒子。由于站点已关闭，我无法为您做一个 plunker - 稍后会在站点备份后尝试做。

但是给你一个想法，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>

【讨论】：