angularjs 错误消息，即使不接触该字段答案

【问题标题】：angularjs error message even without touching the fieldangularjs 错误消息，即使不接触该字段
【发布时间】：2016-11-07 23:04:59
【问题描述】：

为什么下面的 angularjs 表单会引发以下错误，而在输入字段中没有输入任何内容，也没有点击它。
它同时抛出 "It's a valid name!" 和 Error in the field.，即使没有输入或点击该字段。有谁知道原因？

<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>

【问题讨论】：

标签： javascript angularjs error-handling

【解决方案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>

【讨论】：