javascript - 当字段为空时，required 指令返回 false。但是当我控制台表单对象时，它显示 required 是 true 为什么？

Question

created plunker我有以下 html 代码:

<form name="form1">
    <input type="text" ng-model="mk" required/>
    <input type="submit" placeholder="submit" ng-click="submitIt(form1)" >
</form>

Controller :

$scope.submitIt=function(form1){
    console.log(form1);
}

当我提交没有任何值(空字段)的表单时，并在控制台中看到它显示required:true。但根据 required 指令，它返回 required : false

Angular.js 库提供的必需指令:

var requiredDirective = function() {
  return {
    require: '?ngModel',
    link: function(scope, elm, attr, ctrl) {
      if (!ctrl) return;
      attr.required = true; // force truthy in case we are on non input element

      var validator = function(value) {
        if (attr.required && ctrl.$isEmpty(value)) {
          ctrl.$setValidity('required', false);
          return;
        } else {
          ctrl.$setValidity('required', true);
          return value;
        }
      };

      ctrl.$formatters.push(validator);
      ctrl.$parsers.unshift(validator);

      attr.$observe('required', function() {
        validator(ctrl.$viewValue);
      });
    }
  };
};

我很困惑，为什么会这样。

Answer 1

如果要求为真，并且没有输入则有效性为假。

您在指令中看到的错误是为了有效性

   ctrl.$setValidity('required', false);

将有效性设置为 false，这意味着如果需要输入并且未提供任何输入，则该字段处于无效状态...