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

Question

在我的 Angular 页面中，我有一个表单:

<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”，它会显示所需的消息，而不是无效的消息。

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

Answer 1

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

您遇到的问题是，必需的和无效的模式错误都会抛出，并且抛出是有效的。由于无法解析该值，因此它在 ng View 模型 中为 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>