1

現在、すべての ng メッセージにこのようなマークアップを使用しています

<div ng-messages="myForm.fieldName.$error && (myForm.firldName.$dirty || myForm.$submitted)">
    <div ng-message="required">This field is required</div>
    <div ng-message="minlength">Your field is too short</div>
</div>

少し面倒ですが、どうにかして ng-messages をオーバーライドまたは拡張して、フィールドがダーティかどうか、またはフィールドが内部にネストされているフォームかどうかを自動的にチェックするようにしたいと思います (おそらく DOM をたどって?) は $ です提出した。

これをサイト内のすべての ng メッセージのデフォルトの動作にしたいのですが、入力が使用されておらず、フォームが送信されていないときにエラー メッセージを表示する必要がある状況を予測できません。そのため、その動作をオーバーライドしても安全だと思いますが、その方法がわかりません。

ng-messages を完全に置き換えることができることはわかっていますが、そのディレクティブのデフォルトの動作をすべて再作成する必要があり、これらは将来の角度バージョンで変更される可能性があるため、可能であれば拡張したいと思います。Angular がこのためのフックを提供しているか (デコレータ メソッドについて漠然と聞いたことがありますか?)、または条件が満たされていない場合に要素を非表示にする「ng-custom-messages」のような兄弟ディレクティブを作成するかどうかはわかりません。会った？

それで、私はいくつかのアイデアを持っていますが、それらを実装する方法を示すためにちょっとしたコツが必要です。

4

2 に答える 2

0

ngIfを使用する要素で代わりに を使用することをお勧めしngMessagesます。(または) のプロパティをngMessages受け入れることに注意してください。$errorNgModelControllerFormController

<div ng-if="myForm.fieldName.$invalid && (myForm.fieldName.$dirty || myForm.$submitted)"
        ng-messages="myForm.fieldName.$error">
    <div ng-message="required">This field is required</div>
    <div ng-message="minlength">Your field is too short</div>
</div>

余談ですが、要素がフォーカスを失うまで(またはフォームが送信されるまで)、エラー フィードバックを延期する$touched代わりに使用する方が適切である場合があります。$dirty

于 2016-12-09T00:06:00.213 に答える
0

残念ながら、これに対する答えは、送信時にすべてのフィールドを自動的にダーティに設定する新しいフォーム ディレクティブを作成することでした。

ここにコードの短いスニペットがあります...

angular.forEach( formCtrl , function ( formElement , fieldName ) {

    if ( fieldName[0] === '$' ){
        return;
    } 

    formElement.$setDirty();

}, this);

formCtrl.$setDirty();
scope.$apply();
于 2015-09-28T13:21:48.663 に答える