ng消息和ui掩码在第二次验证时发生冲突

ng-messages and ui-mask conflict on second validation

本文关键字：验证 冲突 第二次 消息 ui 掩码 ng      更新时间：2023-09-26

我在使用ng消息和ui掩码时遇到了一个棘手的问题。乍一看，两者都很好，当我第一次检查一个字段时，它会显示应该显示的消息，但在我纠正问题并将其更改为另一个错误的模式后，它将显示该字段无效，但不会显示消息。

  <md-input-container md-no-float class="md-block" flex-gt-sm>
          <label>Mobile*</label>
          <input name="cel" ng-model="newUser.mobile" type="tel" ui-mask="(99) ?99999-9999" ui-mask-placeholder pattern="'([0-9]{2}') [0-9]{4,6}-[0-9]{3,4}$" required md-maxlength="15" ui-options="{clearOnBlur: false}">
          <div ng-messages="userForm.cel.$error" role="alert" multiple>
            <div ng-message="required" class="my-message">Required Field</div>
            <div ng-message="pattern" class="my-message">Invalid mobile format</div>
          </div>
        </md-input-container>

只是为了澄清场景：

1-我将电话输入字段留空2-它显示预期的消息+将字段留空为红色（form.error打开）不允许提交3-我将输入字段更改为有效格式4-消息+错误消失5-我再次将输入字段更改为空白6-它使字段为红色（form.error打开），但消息不会出现

我使用的是最新版本的ui掩码，ng消息被包含在角材料（v1.0.9）中

有什么想法吗？

编辑：随着进一步的调查，我意识到这与ui掩码无关，这似乎只是一个ng消息的问题。myForm.name.$error被触发为"必需"，但div:

  <div ng-message="required" class="my-message">Required Field</div>

不会显示。

我在这里找到了解决方案：只有当$touch是真正的时才会显示angular ng消息

下面的代码适用于我的问题

<md-input-container md-no-float class="md-block" flex-gt-sm>
      <label>Mobile*</label>
      <input name="cel" ng-model="newUser.mobile" type="tel" ui-mask="(99) ?99999-9999" ui-mask-placeholder pattern="'([0-9]{2}') [0-9]{4,6}-[0-9]{3,4}$" required md-maxlength="15" ui-options="{clearOnBlur: false}">
      <div ng-messages="userForm.cel.$error" role="alert" ng-show="userForm.cel.$touched" multiple>
        <div ng-message="required" class="my-message">Required Field</div>
        <div ng-message="pattern" class="my-message">Invalid mobile format</div>
      </div>
</md-input-container>
相关文章：