0

私はng-formの入力を生成するためのカスタム指示文を作成しようとしています。これらの入力は現在のエラーの内容に基づいて情報を含むツールチップを表示できます。与えられたフィールド。指示のng-modelをuib-tooltipに渡す

問題は、カスタムディレクティブのng-modelを読むことができるツールチップテンプレートを取得しようとしているときに、そのフィールドがいつ使用されるのかを確認することです。または、緑色のチェックマークまたは特定のフォームエラーメッセージ。しかし、フィールドの内容が変更されたときには、ng-model$invalidの値を更新していないようです。

https://plnkr.co/edit/sBKZgaGzFZtAz5Ntl2FD?p=preview

私はディレクティブと説明するいくつかのダミーデータと一緒に基本的なplunkerを入れています。入力からすべてのコンテンツをバックスペースすると、無効化がfalseになるはずなので、必要な無効化によってツールチップのコンテンツがfalseではなくtrueになるはずです。

誰かが私にこのことを理解させるのを助けることができれば、それは素晴らしいことでしょう。あなたの例を通って行く

答えて

0

、私は複数の場所で問題が見つかりました:import-inputディレクティブで

1) は、最大と最小の長さをチェックするための正しい属性がng-minlengthng-maxlengthです。中

2) index.htmlあなたはform内部import-inputディレクティブをラップする必要があります。これは次の問題では重要であり、一般的には適切な検証のための良い考えです。

3) 入力フィールドが無効であるかどうかをチェックするとき、私はctrl$$parentFormプロパティに行くことフィールドFO valididtyに正しい値を示していることがわかりました。フォームオブジェクトには、すべての子要素のプロパティがあり、プロパティ名はname属性と同じです。要素を作成するときにname属性を動的に生成するので、この同じ変数を使用して、$$parentFormの要素に対処することができます。無効にスコープを設定すると、次のようになります。

scope.invalid = ctrl.$$parentForm[elementName].$invalid

私は、これらの変更と作業plunkerを追加しました、ご使用のバージョンからフォーク: https://plnkr.co/edit/Ja7Wxqq6KWOk1IXXr7U0?p=preview

関連する問題