ngRequired和angular中的自定义指令

ngRequired and custom directive in angular

本文关键字：自定义 指令 angular ngRequired      更新时间：2023-09-26

当与ngRequired一起使用时，我似乎无法获得angular docs示例中的智能浮点指令。

您可以通过转到角度文档页面来确认这一点https://docs.angularjs.org/guide/forms

编辑智能浮点示例上的plunker，并添加ng required="false"。确保检查整个表单的有效性，而不是单个控件。

如果控件上没有输入，则表单本身始终标记为无效。

我使用的是1.3.0-rc3 版本

为了允许smartFloat指令的值为空，您应该将$validators与$parsers一起用于浮点值的有效性检查。还要注意，从任何解析器返回undefined（或不返回任何值）都将标记整个表单无效。

允许空值

var FLOAT_REGEXP = /^'-?'d+(('.|',)'d+)?$/;
app.directive('smartFloat', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      // Parse
      ctrl.$parsers.unshift(function (viewValue) {
        if (!viewValue) {
          return ''; // <-- Don't return undefined, but empty string instead
        } else if (FLOAT_REGEXP.test(viewValue)) {
          return parseFloat(viewValue.replace(',', '.'));
        }
      });
      // Validate
      ctrl.$validators.float = function (viewValue) {
          if (viewValue === '') {
            ctrl.$setValidity('float', true); // <-- Handle empty value as valid
            return true;
          } else if (FLOAT_REGEXP.test(viewValue)) {
            ctrl.$setValidity('float', true);
            return true;
          } else {
            ctrl.$setValidity('float', false);
            return false;
          }
      };
    }
  };
});

现场示例请参见此处。

相关文章：