0

我需要在预提交的表单上验证输入。我创建了一个指令来验证所述输入并相应地将“valid_amount”设置为 false 或 true。

问题出在表格上，我似乎无法评估'formTransfer.amount.$error.valid_amount'，$error 不存在。关于可能是什么问题的任何想法？

表格的一部分

<form name='formTransfer' ng-submit='prepare( transfer )' >
 <input amount name='amount' ng-model='transfer.amount' required='required' type='number'>
 <span class='error' ng-show='formTransfer.amount.$error.valid_amount'>This is not valid valid_amount!</span>

和指令：

 var AMOUNT_REGEXP = /^(\d*\.\d{1,2}|\d+)$/;

 app.directive("amount", function() {
    return {
      require: "ngModel",
      link: function(scope, element, attrs, ngModel) {
        return ngModel.$parsers.unshift(function(viewValue) {
          if (AMOUNT_REGEXP.test(viewValue)) {
            ngModel.$setValidity("valid_amount", true);
            viewValue;
          } else {
            ngModel.$setValidity("valid_amount", false);
            undefined;
          }
          return console.log(ngModel);
        });
      }
    };
  });

我正在使用 HAML 和 Coffeescript，如果某些代码对澄清或发布原始代码没有意义，请告诉我。

4

1 回答 1

0

ngModelController.$parsers数组是应用于用户输入值的函数数组。

ngModelController.$formatters数组是应用于来自模型（来自范围）的值的函数数组。

您的错误最初没有显示，因为您没有验证您的字段的初始（模型）值。

因此，您需要像这样调整指令：

var AMOUNT_REGEXP = /^(\d*\.\d{1,2}|\d+)$/;

app.directive("amount", function() {
  return {
    require: "ngModel",
    link: function(scope, element, attrs, ngModel) {

      function validate(value){
        if (AMOUNT_REGEXP.test(value)) {
          ngModel.$setValidity("valid_amount", true);
          return value;
        } else {
          ngModel.$setValidity("valid_amount", false);  
          return undefined;
        }
      }

      ngModel.$parsers.unshift(validate);
      ngModel.$formatters.unshift(validate);
    }
  };
});

柱塞

于 2013-07-08T10:41:30.643 回答