web-dev-qa-db-ja.com

angular $ touchedがtrueの場合にのみ表示されるng-messages

私は特別なことは何もしていません。

すべてのキーストロークで検証したい入力があります。検証が失敗した場合は、エラーを表示します。ぼかしイベントが$ touchedをトリガーするのを待たないでください。

これはデフォルトのケースだと思いましたが、明らかにそうではありません。 angularマテリアルとangularメッセージを使用しています。これをCapslock検出に使用しています。

マークアップ：

<form name="primaryLogin" novalidate>
    <md-content layout-padding layout="column">
        <md-input-container flex>
            <label>Login ID</label>
            <input type="text" required="" name="login" ng-model="primary.loginID" capslock>

            <div ng-messages="primaryLogin.$error">
                <div ng-message="required">
                    Please enter a Login ID.
                </div>

                <div ng-message="capslock">
                    Caps Lock is ON!
                </div>
            </div>

            <pre>{{ primaryLogin | json }}</pre>

        </md-input-container>

    </md-content>
</form>

最初にページにアクセスし、Caps Lockをオンにして入力を開始すると、エラーメッセージは次のようになります。

{
  "$error": {
    "capslock": [
      {
        "$viewValue": "Q",
        "$validators": {},
        "$asyncValidators": {},
        "$parsers": [
          null
        ],
        "$formatters": [
          null,
          null
        ],
        "$viewChangeListeners": [],
        "$untouched": false,
        "$touched": true,
        "$pristine": false,
        "$dirty": true,
        "$valid": false,
        "$invalid": true,
        "$error": {
          "capslock": true
        },
        "$name": "login",
        "$options": {
          "debounce": 100,
          "updateOnDefault": true
        }
      }
    ]
  },
  "$name": "primaryLogin",
  "$dirty": true,
  "$pristine": false,
  "$valid": false,
  "$invalid": true,
  "$submitted": false,
  "login": {
    "$viewValue": "Q",
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [
      null
    ],
    "$formatters": [
      null,
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": false,
    "$dirty": true,
    "$valid": false,
    "$invalid": true,
    "$error": {
      "capslock": true
    },
    "$name": "login",
    "$options": {
      "debounce": 100,
      "updateOnDefault": true
    }
  }
}

したがって、これは期待どおりに機能しているようですが、実際のエラーメッセージは、その特定の入力でblurイベントが発生するまで表示されません。 、しかし$ touchedは真実ではないので、表示されません。

$ touchedがtrueに設定されたら、入力に戻ることができ、すべてが期待どおりに機能します。

何か案は？前もって感謝します！

javascriptangularjsangular-materialng-messages
14
TyMayn

変化する

<div ng-messages="primaryLogin.$error">

に

<div ng-messages="primaryLogin.$error" ng-show="primaryLogin.login.$dirty">

あなたも試すことができます

<div ng-messages="primaryLogin.$error" ng-show="primaryLogin.login.$touched">

OR

<div ng-messages="primaryLogin.$error" ng-show="primaryLogin.login.$pristine">

また、条件付きでチェックするために、それらをそのようにクラブすることもできます。

<div ng-messages="primaryLogin.$error" ng-show="primaryLogin.login.$dirty && primaryLogin.login.$touched && primaryLogin.login.$pristine">

または条件付きORチェック：

<div ng-messages="primaryLogin.$error" ng-show="primaryLogin.login.$dirty || primaryLogin.login.$touched || primaryLogin.login.$pristine">

上記を1つずつ試して、どちらのケースにも当てはまるものを見つけてください。

21
Devner

Angular Material（すなわち、<= v0.11.4）の1.0より前のバージョンでは、これが事実でした：ng-messageはデフォルトで表示されました。

ただし、 マテリアルデザインの仕様 には次のように記載されています。

ユーザーがフィールドを操作した後にのみエラーテキストを表示します。ユーザーが誤ったデータを入力すると、ヘルパーテキストがエラーテキストに変換される場合があります。

ユーザーの操作の前にメッセージを表示したい場合は、ng-messagesディレクティブに「md-auto-hide = 'false'」を追加できます。

<div ng-messages="primaryLogin.$error" md-auto-hide='false'></div>

私はこの解決策を見つけました： ここ

4
sung

確認する ng-show="primaryLogin.login.$invalid && primaryLogin.login.$touched"。これは私にとってはトリックでした。

1
Kumar Immanuel

Md-is-errorの例を使用します。

<md-input-container md-is-error="true">

「指定された式がtrueと評価されると、入力コンテナーはエラー状態になります。入力がタッチされて無効である場合、デフォルトでエラーになります。」

https://material.angularjs.org/1.1.3/api/directive/mdInputContainer

1
Дмитрий Иващенко