在 Angular 指令上提交表单之前更改输入值答案

【问题标题】：Change input value before form submit on angular's directive在 Angular 指令上提交表单之前更改输入值
【发布时间】：2013-12-18 17:37:58
【问题描述】：

我有一个自定义指令，它将数字掩码应用于文本输入。所以，我的输入值如下：999.999.999。我的问题是我想在提交表单以将“干净”值发送到服务器端之前将此值更改为 999999999。问题是：如何在 mi 指令中执行此操作？

我尝试在我的链接函数中使用以下代码，但是我有点迷失了。

$(_element).parents('form').submit( function() {
    //I don't know how to change the input value here...
    return true;
});

【问题讨论】：

标签： javascript jquery forms angularjs angularjs-directive

【解决方案1】：

使用这个：

$(_element).parents('form').submit( function() {
  $('input').val().replace('.', ''); 
  return true;
});

这将替换输入的值，要替换的值将是.，而要替换的值将是空的。所以你会得到想要的答案！

【讨论】：

【解决方案2】：

简短的回答是您需要获取+设置元素的值，使用（例如）一个简单的正则表达式来删除点：

var enteredValue = $(_element).val();
$(_element).val(enteredValue.replace(/\./g,''));

但是，与 Angular 的表单处理集成可能是一个好主意，它有许多钩子来以这种方式处理输入的验证和处理。具体来说，使用 Angular 的 ngModelController 的 $parsers，它处理用户输入的值，并且只允许“好”值进入范围内的模型。您可能可以在现有的自定义指令中执行此操作，或者如下单独执行此操作：

app.directive('cleanNumber', function() {
  return {
    require: 'ngModel',
    link: function link(scope, iElement, iAttrs, ngModelController) {
      ngModelController.$parsers.push(function(val) {
        return val.replace(/\./g,'');
      });
    }
  };
});

您可以将其用作属性：

<input type="text" name="number" ng-model="number" clean-number />

然后您可以使用 ngSubmit 指令调用函数来提交表单：

<form name="myForm" ng-submit="submit()">
  ...
  <button type="submit">Submit!</button>
</form>

然后处理后的值在$scope.number 的范围内可用。您可以在 my plunkr 中看到这一点。

【讨论】：