2016-05-17 7 views
1

私は1.5.5の角度を使用しています.HTML5のフォーム検証を利用したいと思います。 私は専門家BWではありません。'number'タイプの特定の入力要素のステップ属性の検証を無効にするにはどうすればよいですか?

だから、私はこのようなものがある:

<input type="number" name="element1" ng-model="element1" step="{{range.step}}" min="{{range.min}}" max="{{range.max}} ..."/> 
<input type="number" name="element2" ng-model="element2" .../> 
<button type="submit" ...</button> 

仕様によれば、ステップ値は、二つの目的に役立つ: 1.これは、ステップから減算数、またはに加え、入力要素の値を示します2.2.入力要素の有効な値を決定します。 これはもちろん、残念です。私の場合、範囲は非常に小さく、例えば0と1の間であり、ステップ値を0.1に設定したいと思います。しかし、0から1までのすべての値が有効であると分類されるようにしたいと思います。

element1にステップ条件を無効にする値が含まれているとします。

まず最初に、ステップの検証手順が完全に機能しないようです。上記の無効な値は角度有効性クラスをトリガーしません(例えば、scope.form。$ invalid is false)。私は提出を進めることができます。この動作は、おそらくバグに起因するものですが、私の利点ですが、いつかこのバグが修正され、問題が残ってしまうのではないかと心配しています。

第2に、element2には、条件を無効にする値、たとえばユーザーが非デジタル文字を入力したとします。この場合、有効性クラスは適切に設定されています(たとえば、scope.form。$ invalidがtrue)。投稿を中止できます。ただし、element1の隣には、「有効な値を選択してください。最も近い2つの有効な値は0.5と0.6です。」というエラーメッセージが表示されます。要素1が要素2の前に表示されます。代わりに、要素2の横に適切なエラーメッセージが表示されたバブルを取得したいと考えています。

element1のステップ条件の検証をどこかに抑えることはできますか?もしそうなら、どうですか?そうでない場合、私は他の選択肢がありますか? HTML5の検証を保持し、無効な要素のために表示されたバブルを表示したいことに注意してください。

+0

独自の指示を行う方が簡単です。 –

+0

私は角度バグ(.directive( "step"、function(){...)を修正するためのディレクティブを追加できますが、これは私が探しているものではありません。 –

答えて

2

stepng-stepの両方を使用すると、後の作業を完了できます。

stepを使用して、HTML入力のアップ/ダウントグルで値を増減させる量を指定します。 Angularが値に対して実行する検証を指定するには、ng-stepを使用します。 ng-stepを指定しない場合、Angularは検証のためにstepの値を使用します。

たとえば、入力トグルで値を0.1ずつ増やし、値を0.01ずつ増やして別々に検証することができます。次の入力定義を使用して、これを達成することができます。

<input type="number" ng-model="model.field" step="0.1" min="0" max="1" ng-step="0.01"/> 
関連する問題