私はAngularJS 1.3.0 RC0と角度メッセージを使用しています。 ng-messagesは、フォームが最初にロードされ、初期状態のときに、これらの「必須」フィールドのエラーメッセージを忠実に表示します。そのため、新しくロードされたフォームページはエラーメッセージでいっぱいになります。これは私が望むものではありません。必須フィールドのngMessageを作成する方法は、それらのフィールドが汚れているかフォームを送信しているときにのみ表示されますか?
私は公式文書を読みましたが、手がかりはありません。そして、ng-messages divに「ng-show = "fieldName。$ dirty"」を配置しようとしましたが、動作しませんでした。どんな助けも大歓迎です!
使用 ng-if
属性を確認して$dirty
を持つタグのng-messages
。
例:
<div ng-messages='myForm.myControl.$error' ng-if='myForm.myControl.$dirty'>
<div ng-message='required'>Required field</div>
</div>
これを行う最良の方法は、$ touchedを使用することです。
<div class="help-block" ng-messages="userForm.name.$error" ng-show="userForm.name.$touched">
...
</div>
汚れている場合のみ:
<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>
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に設定されるため、送信ボタンをクリックするまでエラーメッセージが非表示になります。
エラーが発生するか、ユーザーがページを送信しようとするまでメッセージを表示したくありませんでしたが、上記の解決策はいずれも機能しませんでした。
最終的に私はこれでうまく行きました:
<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>
無効なものを入力すると、エラーが表示されます
ページを送信しようとして、必須フィールドを指定していない場合、エラーが表示されます。
条件を満たした後もエラーメッセージは表示されますか?その場合、angularモジュールでngMessages
に依存することを覚えていますか?例:
angular.module("exampleModule", ["ngMessages"]);
この回答は役に立ちましたが、エラーメッセージが永遠に続く問題を解決することはできませんでした。次のように、表示と非表示のもう少し複雑な使用法を思いつきました。
<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を追加すると、ユーザーがエラーを修正したときにメッセージが消えます。かっこいい。私は角が大好きです。
これを試してみてください
<div ng-messages='myForm.fieldName.$error && (myForm.fieldName.$dirty || myForm.$submitted)' >
<div ng-message='required'>Required field</div>
</div>
<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
である必要があり、これは機能します。
私はこれに苦労していましたが、デフォルトのブラウザの動作では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>
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>
私はCSSルールでこの問題を解決しました
[ng-messages] { display: none; color:red; }
.ng-dirty [ng-messages] { display:block }
それでおしまい..
私にとって魅力的な作品です。
plunker があります
Angularのクラスの使用は驚くべきもので、非常に多くのことができます!