javascript - angular 中的 ngRequired 和自定义指令

Question

当与 ngRequired 一起使用时，我似乎无法在 Angular 文档示例中找到智能 float 指令。

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

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

如果控件上没有输入，表单本身总是被标记为无效。

我使用的是 1.3.0-rc3 版本

Answer 1

为了允许 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;
          }
      };
    }
  };
});

实例见here .