のみ番号指令は

Question

は私が持っている問題は、私が入力したときに、それが唯一の働いているということであると私は値を取り込む場合、それはエラーに必要なメッセージを示し、次のディレクティブ

.directive("onlyNumber", function() { 
    return { 
     restrict: "A", 
     link: function (scope, element, attr, ngModel) { 
      element.bind('input', function() { 
       var position = this.selectionStart - 1; 

       //remove all but number and . 
       var fixed = this.value.replace(/[^0-9\.]/g, ''); 
       if (fixed.charAt(0) === '.')     //can't start with . 
        fixed = fixed.slice(1); 

       var pos = fixed.indexOf(".") + 1; 
       if (pos >= 0)    //avoid more than one . 
        fixed = fixed.substr(0, pos) + fixed.slice(pos).replace('.', ''); 

       if (this.value !== fixed) { 
        this.value = fixed; 
        this.selectionStart = position; 
        this.selectionEnd = position; 
       } 
      }); 
     } 
    }; 
}) 

をコピー＆ペースト発行します。

2番目の問題は、数値以外のキーを入力すると、値は増加しますが長さカウンタは1ずつ増加します（つまり、20分の1の代わりに20分の1）。私がsubmitを押すと、私が入力した非数値の値を得ることができます。

@Edited

<ng-form name="nOtherFacilityForm" novalidate isolate-form flex="100" layout-padding layout layout-wrap> 

        <h2 class="md-title">Other Facilities</h2> 
        <div flex="100" class="animate-slide-up md-whiteframe-1dp white-bg" layout-padding layout layout-wrap> 

         <div flex="100" flex-gt-sm="25"> 
          <md-input-container class="md-block"> 
           <label>Almirah</label> 
           <input type="text" only-number name="almirah" ng-model="LibraryEquipDetails.almirah" md-maxlength="20" maxlength="20" required /> 
           <div ng-messages="nOtherFacilityForm.almirah.$error"> 
            <div ng-message="required">Almirah is required. 
            </div> 
           </div> 
          </md-input-container> 
         </div> 
</ng-form> 

とJS側

$scope.saveInfo = function() { 



      if($scope.nOtherFacilityForm.$invalid){ 
       angular.forEach($scope.nOtherFacilityForm.$error, function (field) { 
        angular.forEach(field, function(errorField){ 
        errorField.$setTouched(); 
        }) 
       }); 
      toastr.error("Please Fill All Mandatory Fields", "Alert!"); 
      return; 
       } 


     }; 

それは私が入力する画像

を参照して、エラーをポップアップし、赤色のフィールドを強調表示もう一度、すべての問題はありません！

Answer 1

ディレクティブはngModelを更新せず、値を更新するだけです。あなたのngModelの使用を更新する

：

ngModel.$setViewValue(fixed); 

しかし、あなたが追加する必要があります。require: "?ngModel"、

.directive("onlyNumber", function() { 
    return { 
     restrict: "A", 
     require: "?ngModel", 
     link: function (scope, element, attr, ngModel) { 
      element.bind('input', function() { 
       var position = this.selectionStart - 1; 

       //remove all but number and . 
       var fixed = this.value.replace(/[^0-9\.]/g, ''); 
       if (fixed.charAt(0) === '.')     //can't start with . 
        fixed = fixed.slice(1); 

       var pos = fixed.indexOf(".") + 1; 
       if (pos >= 0)    //avoid more than one . 
        fixed = fixed.substr(0, pos) + fixed.slice(pos).replace('.', ''); 

       if (this.value !== fixed) { 
        this.value = fixed; 
        this.selectionStart = position; 
        this.selectionEnd = position; 
        ngModel.$setViewValue(fixed); 
       } 
      }); 
     } 
    }; 
})