ngRequired 和 Angular 中的自定义指令答案

【问题标题】：ngRequired and custom directive in angularngRequired 和 Angular 中的自定义指令
【发布时间】：2014-09-26 03:39:30
【问题描述】：

当与 ngRequired 一起使用时，我似乎无法让 angular 文档示例中的智能浮点指令正常工作。

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

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

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

我使用的是 1.3.0-rc3 版本

【问题讨论】：

标签： javascript angularjs

【解决方案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。

【讨论】：

我仍然无法让它工作。问题是表单本身被标记为无效。元素本身似乎没有任何问题，但是如果您在指令上没有输入，则表单会被标记为无效。
@artbonghanoy 你能分享代码（html + js）吗？可能问题不在于指令本身。
@Vadmin，我终于想通了。请在stackoverflow 上阅读此问题。请使用 1.3 中的新验证方案更新您的答案，以便我接受。
@artbonghanoy 感谢您指出验证流程中的重大变化。我已经相应地修改了我的答案。