AngularJSはテーブルなしでフォームなしで入力を検証します

Question

私の質問は奇妙に見えるかもしれませんが、入力を使用してユーザーがテーブルに情報を直接入力できる角度SPAを構築しました。私はデータをどこにでも提出する必要がなく、最後に表示されるいくつかの値を計算するためにサービスによって使用されるため、このようにしました。今私の問題は、私は彼らが空ではないことを確認する入力を検証したいと思います。

私はいくつかの研究を行ってきたし、私が見つけたすべてのチュートリアルは、私はテーブル内のレイアウトが正常に見えると目的に合ったとして避けるためにしようとしているフォームの入力された部分に依存していました。

 <table class="text-center"> 
       <tr> 
        <th class="header">Course Type</th> 
        <th>Amount of Times</th> 
        <th>Frequency (PA)</th> 
        <th>% Staff who need it</th> 
       </tr> 
       <tr> 
        <td class="header"><label for="induction">Induction:</label></td> 
        <td><input class="form-control" type="number" id="inductionAmount" ng-model="staff.inductionAmount" /></td> 
        <td><input class="form-control" type="number" id="inductionFrequency" ng-model="staff.inductionFrequency" /></td> 
        <td><p>100</p></td>    
       </tr> 
       <tr> 
        <td class="header"><label for="newsLetter">News letter:</label></td> 
        <td><input class="form-control" type="number" id="newsLetterAmount" ng-model="staff.newsLetterAmount" /></td> 
        <td><input class="form-control" type="number" id="newsLetterFrequency" ng-model="staff.newsLetterFrequency" /></td> 
        <td><input class="form-control" type="number" id="newsLetterPercent" ng-model="staff.newsLetterPercent" /></td> 
       </tr> 
     </table> 

    <div class="row margin-top"> 
     <div class="col-sm-4 col-sm-offset-4"> 
      <button class="button-orange" style="font-size: 16px; font-weight: 700;" ng-click="clicked()">Next Step</button> 
     </div> 
    </div> 

情報は、ユーザが続行を許可しないように角度1.2を使用していくつかの基本的な検証を追加することを推奨する方法にどのようになるか、後でユーザーのためのいくつかの計算を実行するために使用されるオブジェクト、中に保存されています値は空ですか？申し訳ありません、これは私の最初の角型アプリです。私は過去にぼかしなどを使ってJavaScriptの検証を行ってきましたが、Angularを使うことができればはるかに簡単になるようです。

Answer 1

AngularJSでは、フォーム指示が自動的に見つかったフォーム要素にバインドされます。フォーム要素を使用する必要はありません。 ng-formをそのまま使用できます。

<table ng-form="exampleForm"> 
    ... 
</table> 

これは、要素上でFormControllerを作成し、ローカルスコープに「フォーム」を加算し（例えば$scope.exampleForm）がアクセス可能になります。

私はplunker hereの例を書いて、いくつかのことをしました。

1. ng-formディレクティブをテーブルに追加しました。
2. 私はボタンにng-disabledディレクティブを追加して、フォームの$invalidプロパティにバインドされ最初の入力要素
3. にrequiredを追加しました。

あなたは最初の入力が値を持っていると、ボタンが有効になると表示されます。

さらに、は、となり、1.2.xからのアップグレードが推奨されます。セキュリティ、安定性、およびパフォーマンスに関する多くの更新がありますが、これはおそらく欠落している可能性があります。

Answer 2

フォームを使用する場合は、フォームはフォーム名によって検証デフォルトの取り扱いである。$のisValid、名fromname。汚い$など

あなたはあなたが必要とする、その後、formタグを使用しない場合手動条件でng-showを使用して、双方向バインディングでエラーメッセージを表示/非表示にします。

<input class="form-control" type="number" id="inductionAmount" ng-model="staff.inductionAmount" /> 

<span style="color:red" ng-show="staff.inductionAmount === undefined || staff.inductionAmount === ''"> idection name is required</span> 

---

のような別の方法は、ここでは、ng-fucusとng-show/ng-hideの方法を使用して行うには同じようにあなたがon-focusとJavaScriptでやったことと同じです。