1

この素晴らしいフォーラムでの最初の質問です。

入力した番号が無効である理由をユーザーに警告する必要がありますが、一度に 1 つのメッセージだけを出力したいと考えています。私は解決策を実装しましたが、それは本当に簡単に進化するものではありません。

ここに私のHTMLコードがあります:

<input type="number" name="amountReceived" class="styled" data-ng-model="cashAmountReceived" required>
<div class="error" data-ng-show="cashPaymentForm.amountReceived.$error.required && cashPaymentForm.submitted">Valid amount required</div>
<div class="error" data-ng-show="cashPaymentForm.amountReceived.$error.notEnought && cashPaymentForm.submitted">It's not enought</div>
<div class="error" data-ng-show="cashPaymentForm.amountReceived.$error.negatif && cashPaymentForm.submitted">Positive value only</div>

ここに私のコントローラコードがあります:

$scope.$watch('cashAmountReceived', function() {

    if(angular.isNumber($scope.cashAmountReceived)){


         var tmp =  $scope.cashAmountReceived.toString();
         tmp = tmp.replace(/(\d{0,9})+\.(\d{0,2}).*/,'$1.$2');
         $scope.cashAmountReceived = parseFloat(tmp);

         if( $scope.cashAmountReceived < 0){
             $scope.cashPaymentForm.amountReceived.$setValidity('negatif', false);
             $scope.cashPaymentForm.amountReceived.$setValidity('notEnought', true);
         }
         else{
             $scope.cashPaymentForm.amountReceived.$setValidity('negatif', true);

             if($scope.cashAmountReceived < $scope.totalProductPrice){
                 $scope.cashPaymentForm.amountReceived.$setValidity('notEnought', false);
             }
             else{
                 $scope.cashPaymentForm.amountReceived.$setValidity('notEnought', true);
             }
         }
     } 
     else{
         $scope.cashPaymentForm.amountReceived.$setValidity('notEnought', true);
         $scope.cashPaymentForm.amountReceived.$setValidity('negatif', true);
     }
});

ng-showHTMLページのディレクティブのおかげで、妥当性エラーを手動で管理して、1つだけが印刷されるようにする必要があります。検証基準をさらに追加する必要がある場合に備えて、簡単に進化するソリューションを実装したいと考えています。

カスタム エラーの優先度管理システムを使用して、デフォルト エラーの可能性と互換性のある独自のディレクティブを作成しようと考えていますが、どのように進めればよいかわかりません。

または、コントローラーにプロセスを残して、呼び出されるカスタム エラーを 1 つだけ作成し、適切な警告メッセージを含むcustomスコープ変数 which を定義することもできます。errorReason

HTMLコードに次のようなものがあります：

<input type="number" name="amountReceived" class="styled" data-ng-model="cashAmountReceived" required>
<div class="error" data-ng-show="cashPaymentForm.amountReceived.$error.custom && cashPaymentForm.submitted">{{errorReason}}</div>

皆さんはそれについてどう思いますか?

私の英語が正しくない場合は申し訳ありません。

4

0 に答える 0