2016-08-05 3 views
2

解決方法を確認して説明がありませんでした。私はそれがバグだとは思わない。 (私は間違っているかもしれませんが、なぜそれがうまくいかないのか説明がありません)ドキュメントに記載されている「NaN」の値ではng requiredが機能しません

スコープ変数の値がNaNの場合、ドキュメントでは "ng-required"が期待通りに機能しません。つまり、その入力に対して「必須」エラーを設定する必要があります。

ここは、プランナーリンクです。 https://plnkr.co/edit/mAwpBwyYE1kfXEb3az9p?p=previhew

ドキュメントへのリンク: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController# $のisEmpty

HTML

<div data-ng-controller="demoController"> 
    <h3>Ng Required Does not work for NaN Value </h3> 
    <h5>Documentation : https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#$isEmpty</h5> 
    <p style="color:blue;">According to docs => The default $isEmpty function checks whether the value is undefined, '', null or NaN.</p> 

    <form onsubmit="javascript:return false;" novalidate id="testForm" name="testForm" data-ng-submit="submitTestForm()"> 
    <p>Undefined Value Test for "ng Requried"</p> 
    <input id="undefinedValue" name="undefinedValue" data-ng-model="undefinedValue" data-ng-required="true"/> 
    <span data-ng-show="testForm.undefinedValue.$error.required" style="color:red">Required</span> 

    <p>Null Value Test for "ng Requried"</p> 
    <input id="nullValue" name="nullValue" data-ng-model="nullValue" data-ng-required="true"/> 
    <span data-ng-show="testForm.nullValue.$error.required" style="color:red">Required</span> 

    <p>NaN Value Test for "ng Requried"</p> 
    <input id="nanValue" name="nanValue" data-ng-model="nanValue" data-ng-required="true"/> 
    <span data-ng-show="testForm.nanValue.$error.required" style="color:red">Required</span> 


    <p></p><button type="submit">Test With Ng Submit </button></p> 
    <p><button data-ng-click="submitTestForm()" type="button">Test Without Ng Submit</button></p> 
    </form> 

</div> 

Javascriptを

angular 
    .module('demo',[]) 
    .controller('demoController',['$scope', function($scope){ 

     // Initial Data 
     $scope.undefinedValue = undefined; 
     $scope.nullValue = null; 
     $scope.nanValue = NaN; 

     // Submit test form handler 
     $scope.submitTestForm = function(){ 

     if($scope.testForm.$valid !== true) 
     { 
      return false; 
     } 

     }; 
    }]); 

私の質問は、 1.ドキュメントで説明したように、それは動作しないのはなぜです "デフォルトの$ isEmpty関数chec ks値が未定義であるかどうか、 ''、nullまたはNaNです。 " 2.フォームが「ng-submit」によって送信されたときに、なぜ機能するのですか。送信機能の実行後にエラーが表示されます。

プランナーが問題を説明してくれることを願っています。

+0

はあなたの '' MD-content'タグ内のフィールドinput'カプセル化する必要はありませんか? –

+0

私の答えを受け入れていない理由がありますか? –

答えて

0

実際には、入力のデフォルトタイプである入力["text"]が0、 の$ viewValueの長さをチェックするということです。値が0でないNaNの場合、それは?私がテストした結果、頭があります)nullおよびundefinedの場合、長さ== 0はfalseです。

送信すると、NaNは実際に消去され、nullになるため、「必須」が表示されます。

あなたはNG-必要なのドキュメントに見ることができるように:私は実際に私は、「長さ== 0である」テストを記録しますディレクティブを作成し、私が得たので、それをテストしたいと思っていた Ng-Required

最初の2つの例外と最後の...偽! :)(面白い私は$ viewValueをログインしたときに、私は '未定義' GET)

Plunker

.directive('testValue', function() { 
    return { 
     restrict: 'A', 
     template: '', 
     scope: {}, 
     require: 'ngModel', 
     link: function(scope, iElement, iAttrs, ngModelCtrl) { 
     scope.$watch("nanValue", function(){ 
      console.log(ngModelCtrl.$modelValue.length===0) ; 
     }); 
     } 
    }; 
}); 
関連する問題