Question

为什么以下angularjs形式会抛出以下错误，而输入字段中没有输入任何内容，也没有点击它。
即使没有输入或点击，它也会输入＆＃34;它是一个有效的名字！＆＃34; 和字段错误。。在球场上。有谁知道原因？

<div class="form-group" ng-class="{'has-error':Form.field1.$dirty && Form.field1.$invalid, 'has-success':Form.field1.$valid}" >
    <label class="control-label" >
        Name
    </label>
    <input class="form-control" ng-model="myModel.field1" ng-minlength="3" ng-maxlength="20"
           style="" type="text" name="field1" placeholder="Enter the name"/>
    <p class="error text-small block" ng-show="Form.field1.$error.maxlength">Too long!</p>
    <p class="error text-small block" ng-show="Form.field1.$error.minlength">Too short!</p>
    <p class="error text-small block" ng-show="Form.field1.$dirty && Form.field1.$error">Error in the field.</p>
    <p class="success text-small" ng-show="Form.field1.$valid">It's a valid name!</p>
</div>

Answer 1

原因是因为长度为0对'ng-minlength'有效。
如果你想让0无效，你必须使用'ng-required'。

我猜你想要的东西如下：

<div class="form-group" ng-class="{'has-error':Form.field1.$dirty && Form.field1.$invalid, 'has-success':Form.field1.$valid}">
    <label class="control-label" >
        Name
    </label>
    <input class="form-control" ng-model="myModel.field1" ng-minlength="3" ng-maxlength="20" ng-required="true"
           style="" type="text" name="field1" placeholder="Enter the name"/>
    <p class="error text-small block" ng-show="Form.field1.$dirty && Form.field1.$error.maxlength">Too long!</p>
    <p class="error text-small block" ng-show="Form.field1.$dirty && Form.field1.$error.minlength">Too short!</p>
    <p class="error text-small block" ng-show="Form.field1.$dirty && Form.field1.$error.required">Required!</p>
    <p class="error text-small block" ng-show="Form.field1.$dirty && (Form.field1.$error.maxlength || Form.field1.$error.minlength || Form.field1.$error.required)">Error in the field.</p>
    <p class="success text-small" ng-show="Form.field1.$valid">It's a valid name!</p>
</div>

angularjs错误消息，即使没有触摸字段

1 个答案: