angular material 和 ng-messages 问题

Question

如果我引发 'min-length' 错误然后尝试引发 'required' 错误，后者不会显示，尽管输入有红色下划线。

<md-input-container class="md-block">
    <label for="register_password">Password</label>
    <input required minlength="6" maxlength="100" type="password" name="register_password" id="register_password" ng-model="registerData.password">
    <div ng-messages="registerForm.register_password.$error">
        <div ng-message="maxlength">The password should be shorter</div>
        <div ng-message="minlength">The password should be at least 6 characters long</div>
        <div ng-message="required">Required</div>
    </div>
</md-input-container>

完整的工作示例： http://codepen.io/AndriusRimkus/pen/mPEjYX

谢谢！

Answer 1

你应该使用下面的代码

 <md-input-container class="md-block">
        <label for="register_password">Password</label>
        <input required minlength="6" md-maxlength="100"
               type="password" name="register_password"
               id="register_password" ng-model="registerData.password">
        <div ng-messages="registerForm.register_password.$error">
            <div ng-message-exp="['required', 'minlength']">
              The password shold be at least 6 characters long</div>
 <!-- <div ng-message="minlength">The password should be at least 6 characters long</div> -->
            <div ng-message="md-maxlength">The password should be shorter</div>
        </div>
    </md-input-container>

所以你应该考虑很多事情。由于您使用的是 angular material 设计，我认为您应该使用 md-maxlength ，它会显示针对 maxlength 写入的字符数的提示。我不确定是否有可用的 md-minlength 指令。现在 require 和 minlength 是一回事，所以我认为你应该将这两者结合为一条错误消息。现在有一些与 [ngMessages][1] 有关的特定内容，请查看文档以获取详细说明。我会说几件事。默认情况下 ngMessges 仅显示一条错误消息，如果有超过 1 条错误消息有效，则将显示 DOM 中先出现的一条。您可以使用 multiple 或 ng-messages-multiple 来显示多于 1 条错误消息。我建议你应该在 incrementing order 中写你的错误，比如 required 首先是 minlength（如果你想单独显示它）最后是 md-maxlength.您可以使用 ng-message-exp 组合 1 个以上的错误代码。

Answer 2

你的代码是正确的，但有一点。

您使用的是旧版本 AngularJS Material。

如果您使用此行更改最后一个脚本，那么您的代码将运行正确。

    <!-- Angular Material Library -->
    <!-- Version 1.1.4 -->
    <script src="https://material.angularjs.org/latest/angular-material.min.js"></script>

Check online

祝你好运

angular material 和 ng-messages 问题

Issue with angular material and ng-messages

angularjs

angular-material