angularjs - 即使不在form字段中输入数据，也会执行angularjs错误处理

Question

为什么即使不输入任何内容或不触摸字段也获得成功消息？

<div class="form-group"
     ng-class="{'has-error':Form.description.$invalid, 'has-success':Form.description.$valid}">
    <label class="control-label" translate="dashboard.field1"></label>
    <input class="form-control" ng-model="model.field1"
           ng-minlength=3 ng-maxlength=20
           type="text" name="description"
           placeholder="Enter your text"/>
    <span class="error text-small block"
          ng-if="Form.description.$error.maxlength">Too long!</span>
    <span class="error text-small block"
          ng-if="Form.description.$error.minlength">Too short!</span>
    <span class="success text-small" ng-if="Form.description.$valid"> Success!</span>
</div>

更新:

正如您在我的输入参数中看到的那样，此表单字段不是 required。我只想用min和max来控制输入文本，如果用户想要输入文本以使其满足这些要求的话；但是字段本身不是必需的，因为当我提交表单时，我不希望它仅因为遗漏了一个字段而阻止用户提交它。

Answer 1

这是因为空值是有效的，即使最小长度也是如此。如果为空无效，则应添加required属性。

或者，您可以在ng-if上添加$dirty。现在，只有在用户键入内容时，它才会显示成功。但是，如果用户删除了输入文本，说明仍然是“脏”的。

或者，由于我怀疑您需要的是，请更改ng-if="Form.description.$valid && model.field1"。现在，成功仅在有效(3-20)并且不为空时显示。

<form name="Form">
<div class="form-group" ng-class="{'has-error':Form.description.$invalid, 'has-success':Form.description.$valid}">
  <label class="control-label" translate="dashboard.field1"></label>
  <input class="form-control" ng-model="model.field1" ng-minlength=3 ng-maxlength=20 type="text" name="description" placeholder="Enter your text" />
  <span class="error text-small block" ng-if="Form.description.$error.maxlength">
    Too long!
  </span>
  <span class="error text-small block" ng-if="Form.description.$error.minlength">
    Too short!
  </span>
  <span class="success text-small" 
  ng-if="Form.description.$valid && model.field1"> Success!</span>
</div>