Question

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

当范围变量具有值NaN时，“ng-required”在docs中无法正常工作。即它应该为该输入设置“必需”错误。

这是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 function后显示错误。

我希望吸虫解释这个问题。

Answer 1

实际发生的是输入[“text”]上的ng-required（默认输入类型）检查$ viewValue长度为0，所以对于NaN，该值不是0.（它是什么？我测试过，结果是头）而对于null和undefined条件是长度== 0是假的。

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

正如您在ng-required的文档中所看到的： Ng-Required

我实际上想测试它，所以我创建了一个指令，记录测试“是长度== 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) ;
       });
      }
  };
});

根据文档，ng required对“NaN”值不起作用

1 个答案: