なぜフォーム送信は、angularJSの無効な入力フィールドによってブロックされませんか？

Question

私はanglejsでカスタムフォームの検証を理解しようとしています。私はinputテキストフィールドを 'e'文字が含まれているかどうかに基づいて有効または無効に設定する命令を定義する例を続けました。それはCSSのスタイリングが妥当性に基づいて変化するために機能するようです。フィールドが無効であっても、送信ボタンが押されることができます。次のプランカーは単純な例を示しています。それが無効な場合、入力フィールドの赤い枠線が描画されます。

Plunker：テキストフィールドが空の場合は「追加」ボタンが原因required属性にある、無効になっていますが、私はフィールドが無効な場合にも無効にする]ボタンを望んでいたことをhttp://plnkr.co/edit/84NpBl9nmL5Qda96YF8d?p=previewが

注意。私は何が欠けていますか？私はrequiredが単に "空ではない"より "有効"を意味することを望んでいたと思います。

Answer 1

私は自分がしたいことをする方法を考え出しました。まず、requiredは何らかの値が必要です。送信ボタンを無効にするコントロールを検証するには、ng-disabledを使用し、js関数を呼び出して状態を判断する必要がありました。

inputフィールドのangleディレクティブは、追加ボタンを無効にする必要があるかどうかを記録する変数をtrueまたはfalseに設定し、その変数はnb-disabledテストでチェックされています。も引き続き呼び出すので、cssはフィールドを視覚的に無効なものとしてマークします。

ここに、変更を示す新しいプランカがあります。繰り返しに複数のフォームがある場合、どのように動作するかを示すためにng-repeatも使用しました。

Plunker：http://plnkr.co/edit/HYYPvFFARL1m0WBr3WrM?p=preview

キーの変更がscope.disableAdd[]値を変更するmyDirectiveに修正され、送信ボタン用ng-disabled="checkDisableAdd({{$index}})"属性。