1

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>

表示されません。

4

1 に答える 1

1

ここで解決策を見つけました: angular ng-messages only shown 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>
于 2016-07-26T16:12:47.613 に答える