如何让 Angular 显示正确的验证消息

Question

在我的角度页面中，我有一个表单：

<div class="row-fluid">
    <div class="control-group" ng-class="{error:form.startDate.$invalid && form.startDate.$dirty && error:form.endDate.$invalid && form.endDate.$dirty}">
        <div class="row-fluid">
            <div class="span4">
                <label><b>Start Date</b> (mm/dd/yyyy)</label>
                <input type="date" 
                        id="startDate"
                        name="startDate"
                        max="{{maxDate}}"
                        min="{{minDate}}"
                        ng-pattern="/^((\d{4})-(\d{2})-(\d{2})|(\d{2})\/(\d{2})\/(\d{4}))$/"
                        ng-model="startDate"
                        required />
            </div>
            <div class="span4">
                <label><b>End Date</b> (mm/dd/yyyy)</label>
                <input type="date" 
                        id="endDate"
                        name="endDate"
                        max="{{maxDate}}"
                        min="{{minDate}}"
                        ng-pattern="/^((\d{4})-(\d{2})-(\d{2})|(\d{2})\/(\d{2})\/(\d{4}))$/"
                        ng-model="endDate"
                        required />
            </div>
        </div>
        <div class="row-fluid">
            <div class="span4">
                <span ng-show="form.startDate.$dirty">
                    <span ng-show="form.startDate.$error.required" class="help-inline">Start Date is required</span>
                    <span ng-show="form.startDate.$error.pattern" class="help-inline">Invalid start date</span>
                    <span ng-show="form.startDate.$error.max" class="help-inline">Start Date exceeds maximum</span>
                </span>
            </div>
            <div class="span4">
                <span ng-show="form.endDate.$dirty">
                    <span ng-show="form.endDate.$error.required" class="help-inline">End Date is required</span>
                    <span ng-show="form.endDate.$error.pattern" class="help-inline">Invalid end date</span>
                    <span ng-show="form.endDate.$error.max" class="help-inline">End Date exceeds maximum</span>
                </span>
            </div>
        </div>
        <input type="button" value="Load Report" ng-click="getLeads()" class="btn btn-primary" />
    </div>
</div>

字段按应有的方式工作，但验证没有。如果我在任一日期字段中输入“02/30/2015”，它会显示所需的消息而不是无效的消息。

所以，问题是：如何获得角度 $dirty 来验证正确的问题：字段不为空，因此“必需”无效。日期不正确，应该触发无效消息。

Answer 1

您使用的是哪个版本的 Angular，如果您使用的是 1.3+，那么您可以使用 ng-messages 进行验证。 https://code.angularjs.org/1.3.15/docs/api/ngMessages/directive/ngMessages

您遇到的问题是，必需和无效模式错误都被抛出，并且被抛出是有效的。因为无法解析该值，所以它是ng view model 中的NULL。 ngMessages 在幕后所做的是询问 $error 对象并确定真正的错误。如果你此时不能使用 Angular 1.3，你可以制定自己的指令来做类似的事情。将是比执行诸如 ng-show="$error.required && !$error.pattern" 之类的操作更好的选择，虽然该小表达式解决了您当前的情况，但您将遇到更多需要特殊长表达式的验证案例，这就是创建 ngMessages 的原因。

这是一个 Plunker，它通过您的代码显示 ngMessages 的基本用法 http://plnkr.co/edit/KaCiJPYaxqzhkSJNskc9?p=preview

<div class="row-fluid">
    <div class="control-group" ng-class="{error:form.startDate.$invalid && form.startDate.$dirty && error:form.endDate.$invalid && form.endDate.$dirty}">
        <div class="row-fluid">
            <div class="span4">
                <label><b>Start Date</b> (mm/dd/yyyy)</label>
                <input type="date" 
                        id="startDate"
                        name="startDate"
                        max="{{maxDate}}"
                        min="{{minDate}}"
                        ng-pattern="/^((\d{4})-(\d{2})-(\d{2})|(\d{2})\/(\d{2})\/(\d{4}))$/"
                        ng-model="startDate"
                        required />
            </div>
            <div class="span4">
                <label><b>End Date</b> (mm/dd/yyyy)</label>
                <input type="date" 
                        id="endDate"
                        name="endDate"
                        max="{{maxDate}}"
                        min="{{minDate}}"
                        ng-pattern="/^((\d{4})-(\d{2})-(\d{2})|(\d{2})\/(\d{2})\/(\d{4}))$/"
                        ng-model="endDate"
                        required />
            </div>
        </div>
        <div class="row-fluid">
            <div class="span4">
                <span ng-messages="form.startDate.$error" ng-if="form.startDate.$dirty">
                    <span ng-message="required">Start Date is required</span>
                    <span ng-message="pattern">Invalid start date</span>
                    <span ng-message="max">Start Date exceeds maximum</span>
                </span>
            </div>
            <div class="span4">
                <span ng-messages="form.endDate.$error" ng-if="form.startDate.$dirty">
                    <span ng-message="required">End Date is required</span>
                    <span ng-message="pattern">Invalid end date</span>
                    <span ng-message="max">End Date exceeds maximum</span>
                </span>
            </div>
        </div>
        <input type="button" value="Load Report" ng-click="getLeads()" class="btn btn-primary" />
    </div>
</div>