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>

字段可以正常工作，但验证没有。如果我进入＆＃39; 02/30/2015＆＃39;在任一日期字段中，它显示所需的消息而不是无效的消息。

所以，问题是：如何获得角度$ dirty以验证正确的问题：字段不是空的，所以＆＃34;必需＆＃34;不是有效的。日期不好，应该触发无效消息。

enter image description here

Answer 1

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

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

这是一个使用您的代码显示ngMessages的基本用法的Plunker 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>

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

1 个答案: