仅数指令发出

-1

我有复制粘贴以下指令仅数指令发出

.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; 
       } 
      }); 
     } 
    }; 
})

的问题是，当我键入唯一的工作，如果我填充值，它显示所需的错误消息。

第二个问题是，当我输入非数字键时，它将删除值但长度计数器增加1（即1/20而不是0/20）并且不弹出错误。当我按提交时，我可以得到我输入的非数字值。

@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; 
       } 


     };

它弹出错误，并突出显示红色的场，看到图像

当我键入再一次，那么一切都很好！

来源

2017-10-01 Shahid Ghafoor

能否请你也分享了HTML，从那里是如何产生的错误信息，也如果可能的工作片段。 –

@NarenMurali我已更新问题并提供更多详细信息！ –

您的指令不会更新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); 
       } 
      }); 
     } 
    }; 
})

来源

2017-10-01 03:14:22 Fetrarij

@Fetra，确定一个问题已解决。我已经更新了这个问题，并提出了更多的细节来解决第二个问题。请参见。 –

仅数指令发出

回答

相关问题