Question

与ngRequired一起使用时，我似乎无法在angular docs示例中找到智能浮点指令。

您可以转到角度文档页面进行确认 https://docs.angularjs.org/guide/forms

编辑智能浮动示例中的plunker，并添加ng-required =＆＃34; false＆＃34;。确保检查整个表单的有效性，而不是单个控件。

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

我使用的是版本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。

ng angular中的必需和自定义指令

1 个答案: