Question

created plunker 我有以下HTML代码：

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

控制器：

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

当我提交没有任何值的表单（空字段），并在console.it中显示required:true。但根据要求的指令，它返回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

如果required为true，并且没有输入，那么有效性为false。

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

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

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

Answer 2

在bitton上使用ng-disabled来阻止提交表单。

    <input type="submit" placeholder="submit" ng-click="submitIt(form1)" ng-disabled="form1.$invalid || !form1.$dirty">

请参阅here

当字段为空时，required指令返回false。但当我控制表单对象时，它显示所需的是真的为什么？

2 个答案: