2016-03-23 25 views
3

1.5で追加されたコンポーネントを使用しているアプリケーションにngMessagesを導入しようとしました。ngMessages with Angular 1.5.xコンポーネント

Error: $compile:ctreq Missing Required Controller.

This is a common error with ngMessages and the normal remedy is suggested here: https://docs.angularjs.org/error/ $compile/ctreq?p0=ngMessages&p1=ngMessage

は、しかし、私はディレクティブの特殊なタイプであるコンポーネントは、使用していますし、これがあるとは思われない。できるだけ早く私は私のテンプレートでngMessageへの参照を含めるように私はこのエラーメッセージを受信して​​いますコンポーネントのオプション。

ngMessagesは、のコンポーネントを1.5で使用していますか?

ディレクティブで使用するための構文は次のようである:

myApp.directive('myDirective', function() { 
    return { 
    require: 'ngModel', 
    ... 
    } 
} 

コンポーネントのマニュアル:https://docs.angularjs.org/guide/componentrequireに相当をカバーしていません。

+2

なぜ説明なしで投票が下りますか? –

+0

Upvoted :)ディレクティブとコンポーネントの間の比較をチェックすると、両方がrequireコンフィグレーションを受け入れるように見えます。https://docs.angularjs.org/guide/component#comparison-between-directive-definition-and-component-definition –

+0

受け入れられた回答についてのコメントを参照してください。それは必要ではないと思われる。 (私は実際にそれを試しました。)問題は、外側のng-messages divの省略です。 –

答えて

1

これは役に立ちます。

<form name="userLoginForm" autocomplete="off"> 
    <input type="text" minlength="10" maxlength="10" ng-pattern="/^[0-9]+$/" required ng-model="userData.mobileNumber" placeholder="Enter Mobile Number" class="form-control login-form-input" id="mobileNumber" name="mobileNumberInput"/> 
    <div ng-messages="userLoginForm.mobileNumberInput.$error" role="alert"> 
     <div ng-message="required"> 
      This field is required 
     </div> 
     <div ng-message="pattern"> 
     Enter correct mobile number 
     </div> 
     <div ng-message="minlength, maxlength"> 
      Your mobile number must 10 characters long</div> 
     </div> 
    </div> 

+0

これは実際に役に立ちました。私は外側のdivを見逃していた、それは実際にエラーの原因です。エラーメッセージとドキュメントは非常に間違っています。 –

+1

OPが質問のw/outの説明の下投票について不平を言うのは面白いですが、この回答がOPを助けてくれたときに投票に迷うことはありませんでした。 –

+1

実際、私は元々投票していましたが、しばらくの間、私は投票を変更できませんでした。だから私はあなたのすぐ上にコメントを追加し、答えを受け入れたのです。 –

0

あなたが正しいのdiv構造を持っていないときに起こります。 最初のdivにはng-messagesが含まれていなければならず、1つの内部はng-messageでなければなりません。ドキュメントから :

<ANY **ng-messages**="expression" role="alert"> 
    <ANY **ng-message**="stringValue">...</ANY> 
</ANY> 

角度のデバッグメッセージは、このインスタンスでは役に立たないで、より多くの混乱を引き起こします。

関連する問題