Question

我需要验证表单上的输入预先提交。我创建了一个指令，用于验证所述输入并设置＆＃39; valid_amount＆＃39;相应地为假或真。

问题出现在表单上，我似乎无法评估'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，如果有些代码无法澄清或发布原始代码，请告诉我。

Answer 1

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

PLUNKER

表单未定义字段的$ error

1 个答案: