使用angularjs在一定位数后插入连字符

Question

我想插入连字符以验证ID号。例如，我的卡号格式应为123-2342-1232321-1（总共15个数字），不允许用户输入超过15位的数字。一旦用户输入了以上一组数字，并且每个数字前后都有空格，我就需要添加连字符。第一个连字符应在3位数字后添加，第二个连字符应在输入4位数字后添加，第三个连字符应在输入7位数字后添加。如何验证？

<div>
        <input type="text" id="tbNum" ng-keypress="addHyphen(this)"
            placeholder="Type some values here" />
    </div>

 $scope.addHyphen = function(element) {
        let ele = document.getElementById(element.id); // ele doesnt have id value
        ele = ele.value.split('-').join('');   

        let finalVal = ele.match(/.{1,3}/g).join('-');
        document.getElementById(element.id).value = finalVal;
      };

我试图实现上述方法，但是element.id不能捕获输入字段的id值。

Answer 1

如果在$event函数（而不是ng-keypress）中传递this，则可以读取srcElement.id属性。

Answer 2

function addHyphen(elem) {
  if (elem.value.length === 15) {
    finalVal = elem.value.replace(/(\d{3})(\d{4})(\d{7})(\d{1})/, "$1-$2-$3-$4");
    elem.value = finalVal;
  }

};

<div>
  <input type="text" id="tbNum" onkeypress="addHyphen(this)" placeholder="Type some values here" />
</div>

您可以使用regex，请尝试以下

let num = "123234212323211";
console.log(num.replace(/(\d{3})(\d{4})(\d{7})(\d{1})/, "$1-$2-$3-$4"));

尝试类似下面的内容

    $scope.addHyphen = function(element) {
      if (element.value.length === 15) {
        finalVal = element.value.replace(/(\d{3})(\d{4})(\d{7})(\d{1})/, "$1-$2-$3-$4");
        element.value = finalVal;
      }
    };

希望这会有所帮助