ng-minlengthで検証する際のアンダーグラウンドプロパティ

Question

私の角度コントローラでは、ユーザーが5文字を挿入したことを確認しようとします.5文字未満であれば警告が表示されます。私のコントローラ：私は$ scope.customPostTextが未定義になり、ログにエラーが書き込まれた5つの未満の文字を入力すると、いくつかの理由で

var app = angular.module('myapp', ['ui.bootstrap']); 
app.controller('FeedController', function ($scope, $http) { 


    $scope.customPostText = ""; 
    $scope.sendMessage = function() 
    { 
     console.log("text "); 
     console.log($scope.customPostText); 
     var length = $scope.customPostText.length 
     //could us: 
     //if ($scope.postcommentForm.customPostText.$valid) instead to check if valid 
     //but I want to see the length. 
     if(length >4 && length < 255) 
     { 
        alert("not undefined"); 
     } 
     else 
     { 
      alert("message needs 5 characters you have."+length); 
     } 
    } 
}); 

：

未定義

のプロパティ「長さ」を読み込めません

は、しかし5文字以上に問題はありません、私は私のhtmlでNG-MINLENGTHを使うからだと判明：

<div ng-controller="FeedController"> 
    <div class="row"> 
     <form id="postcommentForm" name="postcommentForm"> 
     <div class="form-group"> 
      <div class="input-group" id="post-comment-textarea"> 
      <textarea class="form-control" name="customPostText" id="customPostText" maxlength="255" 
         ng-model="customPostText" 
         ng-minlength="5" 
         ng-maxlength="255" 
         ng-trim="true" 
         ng-class="{ 'success-border': postcommentForm.customPostText.$valid ,'error-border': !postcommentForm.customPostText.$valid }" 
         ng-required="true"        
         ></textarea> 
      <span class="input-group-addon btn btn-success" 
        ng-disabled="{{postcommentForm.customPostText.$valid == false}}" 
        ng-click="sendMessage()" 
        ng-class="{ 'success-border': postcommentForm.customPostText.$valid ,'error-border': !postcommentForm.customPostText.$valid }" > 
       Send 
      </span> 

      </div> 
     </div> 
     </form> 
    </div> 
</div> 

Fiddle

私はNG-クラスで使用検証のためにNG-MINLENGTHが必要しかし：私は未定義されている値の問題がなくても、NG-MINLENGTHを使用するにはどうすればよい

ng-class="{ 'success-border': postcommentForm.customPostText.$valid ,'error-border': !postcommentForm.customPostText.$valid }" 

？

Answer 1

min-length検証は、有効でないときにコンテンツが送信されないようにします。 したがって、あなたは不定になります。これを処理する

一つの方法は、次のようになります。

var length = angular.isDefined($scope.customPostText) ? $scope.customPostText.length : 0

あなたは0限り有効な入力は、入力フィールドにwrittinされていないとして取得しますこの方法です。

Answer 2

はい、問題は、使用しているng-minlengthのためです。ng-modelに値を割り当てます（最小長を超えた場合のみ）。私はあなたがこの動作

理想的なされていない変更が、シフト・ソリューションを作ることができるとは思わないこと分の長さを削除することであり、何を行うことができますことは、その後

if(length >4 && length < 255) 
    { 
     $scope.length_valid = true; 
     alert("not undefined"); 
    } 
    else 
    { 
     $scope.length_valid = false; 
     alert("message needs 5 characters."); 
    } 

など、コントローラに変数のトグラーのようなものを作るですHTMLで

ng-class="{ 'success-border': postcommentForm.customPostText.$valid && length_valid ,'error-border': !postcommentForm.customPostText.$valid || !length_valid }" 

Answer 3

は、このようなフォーム名を使用して変数を割り当てる：あなたのjsの中$ scope.postcommentForm.customPostText

それは決してあなたに未定義を与えません。

var app = angular.module('myapp', ['ui.bootstrap']); 


app.controller('FeedController', function ($scope, $http) { 


$scope.customPostText = ""; 
$scope.sendMessage = function() 
{ 
    console.log("text "); 
    console.log($scope.postcommentForm.customPostText); 
    var length = $scope.postcommentForm.customPostText.length 
    if(length >4 && length < 255) 
    { 
       alert("not undefined"); 
    } 
    else 
    { 
     alert("Bericht moet minimaal 5 karakters bevatten."); 
    } 
} 

}）;