AngularJS - フォーム送信時に余分な検証を実行

Question

私はしばらくの間グーグルで行っており、私の特定のケースでは良い答えが見つからないようです。リアルタイム検証を行う方法を見つけましたが、ユーザーが「送信」をクリックした後、カスタム検証と組み合わせる必要があります。私はまだ有効ではないにもかかわらず、ユーザーが依頼をクリックできるようにしたいが、コード内の投稿をキャンセルする。次のコードを取る：

<form name="cashForm" id="cashForm" novalidate> 
    <input type="text" id="name" required /> // 
    <input type="number" placeholder="Tax: " required name="tax" id="tax" /> 
    <input type="number" placeholder="Tip: " required name="tip" id="tip" /> 
    <button ng-click="submission()" ng-disabled="paymentForm.$invalid">Submit</button> 
</form> 


//inside controller 
this.submission = function() { 
    //check if tip + tax is over 20 
    //prevent form and show error message if not 
    //otherwise allow default behavior 
} 

だから私は唯一税/先端が、私はこれをチェックしないと、それは満たしていない場合どのように私は、フォームの送信を防ぐにはどうすればよい10以上である場合、フォームが実際に提出したいです要求事項？また、私はコントローラにこのロジックを入れますか？

Answer 1

これは、あなたが私に後にしているものにかなり近いようです。

<form name="cashForm" id="cashForm" novalidate> 
    <input id="name" name="name" type="text" ng-model="nameValue" required /> 
    <input id="tax" name="tax" type="number" ng-model="taxValue" placeholder="Tax: " required /> 
    <input id="tip" name="tip" type="number" ng-model="tipValue" placeholder="Tip: " required /> 
    <button 
     ng-click="submission()" 
     ng-disabled="paymentForm.$invalid"> 
     Submit 
    </button> 

を注入：あなたの入力は、あなたがピックアップし、あなたのコントローラで使用できるデータ・バインディングの双方向を作成するために、コントロールに物事のカップル...

はng-modelディレクティブを追加します。

function submission() { 

    $scope.errorMsg = ""; 

    if ($scope.taxValue <= 10) { 
     $scope.errorMsg = "tax not greater than 10"; 
     return; 
    } 

    if ($scope.tipValue <= 10) { 
     $scope.errorMsg = "tip not greater than 10"; 
     return; 
    } 

    // If you reached here your post-click validation passed, 
    // so continue to submit the data... 

} 

：あなたは、コントローラの submission方法でそれら ng-modelバインディングをピックアップすることを可能にするためにあなたのコントローラに $scopeあなたは、知覚の弊害について読みたいかもしれない、あなたのコントローラで $scopeを使用してひび割れしたら、最後に

<div ng-if="!!errorMessage" class="text-danger"> 
    {{ errorMessage }} 
</div> 

：

あなたは、エラーメッセージをハイライトするCSSクラスでng-ifディレクティブを使用して、エラーメッセージを表示することができます$scopeを使用して、代わりにcontroller-as構文に切り替えることを検討してください。ジョンパパのブログ記事をチェックしてください。AngularJS's Controller As and the vm Variable