根据文档，ng required 不适用于“NaN”值答案

【问题标题】：ng required does not work for "NaN" value according to docs根据文档，ng required 不适用于“NaN”值
【发布时间】：2016-08-09 02:43:58
【问题描述】：

我已经检查了解决方案，但没有得到解释。我怀疑这是一个错误。（我可能错了，但我没有解释为什么它不起作用。）

当范围变量的值为 NaN 时，“ng-required”在文档中无法按预期工作。即它应该为该输入设置“必需”错误。

这里是 plunker 链接。 https://plnkr.co/edit/mAwpBwyYE1kfXEb3az9p?p=previhew

文档链接： https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#$isEmpty

HTML

 <div data-ng-controller="demoController">
  <h3>Ng Required Does not work for NaN Value </h3>
  <h5>Documentation : https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#$isEmpty</h5>
  <p style="color:blue;">According to docs =>  The default $isEmpty function checks whether the value is undefined, '', null or NaN.</p>

  <form onsubmit="javascript:return false;" novalidate id="testForm" name="testForm" data-ng-submit="submitTestForm()">
    <p>Undefined Value Test for "ng Requried"</p>
    <input id="undefinedValue" name="undefinedValue" data-ng-model="undefinedValue" data-ng-required="true"/>
    <span data-ng-show="testForm.undefinedValue.$error.required" style="color:red">Required</span>

    <p>Null Value Test for "ng Requried"</p>
    <input id="nullValue" name="nullValue" data-ng-model="nullValue" data-ng-required="true"/>
    <span data-ng-show="testForm.nullValue.$error.required" style="color:red">Required</span>

    <p>NaN Value Test for "ng Requried"</p>
    <input id="nanValue" name="nanValue" data-ng-model="nanValue" data-ng-required="true"/>
    <span data-ng-show="testForm.nanValue.$error.required" style="color:red">Required</span>


    <p></p><button type="submit">Test With Ng Submit </button></p>
    <p><button data-ng-click="submitTestForm()" type="button">Test Without Ng Submit</button></p>
  </form>

</div>

Javascript

angular
  .module('demo',[])
  .controller('demoController',['$scope', function($scope){

      // Initial Data
      $scope.undefinedValue = undefined;
      $scope.nullValue = null;
      $scope.nanValue = NaN;

      // Submit test form handler
      $scope.submitTestForm = function(){

        if($scope.testForm.$valid !== true)
        {
          return false;
        }

      };
  }]);

我的问题是， 1.为什么它不像文档中解释的那样工作， “默认 $isEmpty 函数检查值是否未定义、''、null 或 NaN。”。 2. 为什么通过“ng-submit”提交表单时会起作用。 ng submit 函数执行后报错。

我希望 plunker 能解释问题。

【问题讨论】：

您不需要将input 字段封装在md-content 标签中吗？
你有什么理由不接受我的回答？

标签： javascript angularjs

【解决方案1】：

实际发生的情况是 input["text"] 上的 ng-required 是默认输入类型，它检查 $viewValue 长度是否为 0，因此，对于 NaN，该值不是 0。（它是什么？我测试过，结果是正面）而对于 null 和 undefined，条件是 length == 0 为 false。

当您提交时，NaN 实际上会被清除并变为空，因此显示“必需”。

您可以在 ng-required 的文档中看到： Ng-Required

我实际上想测试它，所以我创建了一个指令，记录测试“is length ==0”，我得到了前两个异常和最后一个......错误！ :) （有趣的是，当我记录 $viewValue 时我得到“未定义”）

Plunker

.directive('testValue', function() {
  return {
      restrict: 'A',
      template: '',
      scope: {},
      require: 'ngModel',
      link: function(scope, iElement, iAttrs, ngModelCtrl) {
       scope.$watch("nanValue", function(){
          console.log(ngModelCtrl.$modelValue.length===0) ;
       });
      }
  };
});

【讨论】：