如何让AngularJS的百分比输入框支持.5202这类带前导小数点的数值

问题原因 #

你当前的配置存在3个导致.5202格式输入绑定失败的问题：

• ng-pattern正则规则限制：原有正则/^[0-9]+(\.[0-9]{1,3})?$/要求小数点前必须存在至少1位数字，.5202这类小数点开头的输入无法匹配规则，触发校验失败
• step属性配置错误：step="1"限定输入值必须是1的整数倍，所有带小数的输入都会触发原生number输入框的内置校验失败，AngularJS会自动将绑定的ngModel赋值为undefined
• ng-model写法错误：AngularJS的ng-model属性不需要加$scope前缀，原写法ng-model="$scope.taxPercentage"属于错误用法

解决步骤 #

1. 修改ng-pattern正则规则，兼容小数点开头的输入，同时避免仅输入单个小数点的非法情况：
   把正则替换为/^(?:\d+|\d*\.\d{1,3})$/，该规则支持三类合法输入：纯整数、整数+1_{3位小数、小数点开头+1}3位小数
2. 调整step属性，匹配你允许的小数精度，你当前支持最多3位小数，所以把step="1"改为step="0.001"
3. 修正ng-model的写法，删除$scope前缀
4. 可选：如果需要自动把字符串格式的.5202转为数值类型的0.5202存储，可以增加ng-change处理逻辑

修改后的完整代码示例 #

<input 
  class="form-control" 
  type="number" 
  step="0.001" 
  min="0" 
  ng-pattern="/^(?:\d+|\d*\.\d{1,3})$/" 
  ng-model="taxPercentage"
  ng-change="fixTaxPercentage()"
>

对应的控制器逻辑：

$scope.taxPercentage = 0;
$scope.fixTaxPercentage = function() {
  if (typeof $scope.taxPercentage === 'string') {
    $scope.taxPercentage = parseFloat($scope.taxPercentage);
  }
  console.log($scope.taxPercentage); // 输入.5202时输出0.5202
}

内容的提问来源于stack exchange，提问作者I Love Stackoverflow