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>

所以你应该考虑很多事情。由于您使用的是角度材质设计，我认为您应该使用md-maxlength，它将显示针对maxlength编写的字符数的提示。我不确定是否有任何md-minlength指令可用。现在要求和minlength有点相同，所以我认为你应该将这两者合并为一个错误信息。现在有一些特定的事情已经转移到[ngMessages][1]检查文档以进行详细说明。我会说几件事情。默认情况下，ngMessges仅显示一条错误消息，如果有多条错误消息有效，则会显示DOM中出现的错误消息。您可以使用multiple或ng-messages-multiple来显示多条错误消息。我建议您应该在递增顺序中写入错误，例如required首先跟minlength（如果您想单独显示）和最后md-maxlength。您可以使用ng-message-exp组合多个错误代码。

Answer 2

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

您使用的是旧版AngularJS Material。

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

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

https://reacttraining.com/react-router/web/api/HashRouter

祝你好运

角度材料和ng消息的问题

2 个答案: