第二次验证时 ng-messages 和 ui-mask 冲突答案

【问题标题】：ng-messages and ui-mask conflict on second validation第二次验证时 ng-messages 和 ui-mask 冲突
【发布时间】：2016-07-26 14:24:05
【问题描述】：

我在使用 ng-messages 和 ui-mask 时遇到了一个棘手的问题。乍一看，两者都工作正常，当我第一次检查一个字段时，它会按原样显示消息，但是在我更正问题然后将其更改为另一个错误模式后，它将显示该字段无效，但不会显示消息。

  <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-mask 并且 ng-message 包含在 angular-material (v1.0.9^) 中

有什么想法吗？

编辑：经过进一步调查，我意识到它与 ui-mask 无关，这似乎只是 ng-messages 的问题。 myForm.name.$error 被触发为“必需”，但 div:

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

不会显示。

【问题讨论】：

我总是使用 ng-required = 'true' 并且从来没有遇到任何错误，试试这个
它可以解决所需的问题，但是 ng-pattern /ng-min-max 呢？

标签： javascript angularjs angular-material ng-messages

【解决方案1】：

我在这里找到了解决方案： angular ng-messages only showing when $touched is true

下面的代码解决了我的问题

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

【讨论】：