web-dev-qa-db-ja.com

必須フィールドのngMessageをダーティまたはフォームの送信時にのみ表示する方法は？

私はAngularJS 1.3.0 RC0と角度メッセージを使用しています。 ng-messagesは、フォームが最初にロードされ、初期状態のときに、これらの「必須」フィールドのエラーメッセージを忠実に表示します。そのため、新しくロードされたフォームページはエラーメッセージでいっぱいになります。これは私が望むものではありません。必須フィールドのngMessageを作成する方法は、それらのフィールドが汚れているかフォームを送信しているときにのみ表示されますか？

私は公式文書を読みましたが、手がかりはありません。そして、ng-messages divに「ng-show = "fieldName。$ dirty"」を配置しようとしましたが、動作しませんでした。どんな助けも大歓迎です！

angularjsforms
43
Nicole Naumann

使用 ng-if属性を確認して$dirtyを持つタグのng-messages。

例：

<div ng-messages='myForm.myControl.$error' ng-if='myForm.myControl.$dirty'>
    <div ng-message='required'>Required field</div>
</div>
90
Eoinii

これを行う最良の方法は、$ touchedを使用することです。

<div class="help-block" ng-messages="userForm.name.$error" ng-show="userForm.name.$touched">
    ...
</div>
20
Darren

汚れている場合のみ：

<div ng-messages="myForm.myField.$dirty && myForm.myField.$error">
    <div ng-message='required'>Required field</div>
</div>

フォームが送信された場合のみ：

<div ng-messages="myForm.$submitted && myForm.myField.$error">
    <div ng-message='required'>Required field</div>
</div>
14
John Knoop

Ng-ifを使用する代わりに、次のようなことができます...

<div ng-messages='myForm.myControl.$error' ng-if='submitted'>
   <div ng-message='required'>Required field</div>
</div>

送信ボタンに次を追加します。

ng-click="submitted=true"

おそらく、再度入力するときに '$ scope.submitted'をfalseに戻したいので、これをテキスト/電子メール入力に追加できます。

ng-keyup="submitted=false"

この方法では、送信ボタンのみが '$ scope.submitted'をtrueに変更し、他のすべての操作はfalseに設定されるため、送信ボタンをクリックするまでエラーメッセージが非表示になります。

12
LT86

エラーが発生するか、ユーザーがページを送信しようとするまでメッセージを表示したくありませんでしたが、上記の解決策はいずれも機能しませんでした。

最終的に私はこれでうまく行きました：

<form name='frmUser'>
..........
..........
<div ng-messages="frmUser.firstName.$error" 
     ng-show='frmUser.$submitted || frmUser.firstName.$dirty' role="alert">
      <div ng-message="required" class="err">Required</div>
      <div ng-message="maxlength" class="err">Maximum 50 characters.</div>
</div>
<input ng-model="model.first"
       name="firstName"
       type="text"
       ng-required="true"
       ng-maxlength="50"
       placeholder="Enter your first name" />

</form>

無効なものを入力すると、エラーが表示されます

ページを送信しようとして、必須フィールドを指定していない場合、エラーが表示されます。

5
Ali Adravi

条件を満たした後もエラーメッセージは表示されますか？その場合、angularモジュールでngMessagesに依存することを覚えていますか？例：

angular.module("exampleModule", ["ngMessages"]);
4
Larrifax

この回答は役に立ちましたが、エラーメッセージが永遠に続く問題を解決することはできませんでした。次のように、表示と非表示のもう少し複雑な使用法を思いつきました。

<div class="help-block"
    ng-messages="addPlanForm.planName.$error"
    ng-show="addPlanForm.$submitted || addPlanForm.planName.$dirty || (addPlanForm.planName.$invalid && addPlanForm.planName.$touched)">
    <p ng-message="required" ng-hide="addPlanForm.planName.$valid">Your name is required.</p>
</div>

エラーが発生したときに生成されたメッセージにng-hideを追加すると、ユーザーがエラーを修正したときにメッセージが消えます。かっこいい。私は角が大好きです。

2
user1416192

これを試してみてください

<div ng-messages='myForm.fieldName.$error && (myForm.fieldName.$dirty || myForm.$submitted)' >
    <div ng-message='required'>Required field</div>
</div>
2
byteC0de
<input required type="text" ng-model="model" name="field" ng-maxlength="13" ng-minlength="10">     
<div ng-messages="form.field.$error" ng-if='form.$submitted'>
            <p ng-message="required">Required</p>
            <p ng-message="maxlength">not a valid field. Length exceeds.</p>
            <p ng-message="minlength">not a valid field. Length is shorter.</p>
</div>

ボタンのタイプはsubmitである必要があり、これは機能します。

1
MaazKhan47

私はこれに苦労していましたが、デフォルトのブラウザの動作ではng-required = "true"を使用した無効なフォーム送信が許可されていなかったため、ngメッセージが表示されませんでした。これを解決するために、novalidateでフォームを装飾できます。これが私の完全な実例です：

<form name="myForm" novalidate ng-submit="myForm.$valid && controllSideSubmitHandle()">
  <input type="text" name="name" ng-model="myScope.name" ng-required="true">
  <div ng-messages="myForm.$error || myForm.$submitted" style="color:maroon" role="alert" ng-if="myForm.name.$dirty || myForm.$submitted">
    <div ng-message="required">Name is required.</div>
  </div>
  <input type="submit" value="Submit"/>
</form>
1
edencorbin

AngularJS Materialを使用している場合、この機能の多くはすぐに使用できます！ <md-input-container>の中にすべてを入れることを忘れないでください。

codepenの例 を使用すると、どのように見えるかを確認できます。これは、入力がクリックされる前にエラーを隠すだけでなく、素敵な赤いスタイリングと、表示されるタイミングのアニメーションを追加します！

実際のコードは次のとおりです。

  <form name="books" novalidate>
    <md-input-container>
      <input ng-model="title" name="title" required/>
      <div ng-messages="books.title.$error">
        <div ng-message="required">Title is required</div>
      </div>
    </md-input-container>
  </form>
1
hubatish

私はCSSルールでこの問題を解決しました

[ng-messages] { display: none; color:red; } 
.ng-dirty [ng-messages] { display:block }

それでおしまい..

私にとって魅力的な作品です。

plunker があります

Angularのクラスの使用は驚くべきもので、非常に多くのことができます！

1
guy mograbi