无法检测<form>。$ error.mindate when。$ submitted

时间:2017-03-23 14:12:12

标签: javascript html angularjs angular-material

我正在尝试在我的日期选择器旁边显示错误消息,如果用户选择的日期早于所选的日期和相反日期。此消息应仅在用户单击提交按钮后显示。

代码:

 <form name="form" ng-submit="ctrl.submit(form.$valid)" novalidate>
        <div class="form-group">
            <md-datepicker name="fromDate" ng-model="ctrl.fromDate" ng-required="ctrl.toDate" md-max-date="ctrl.toDate"></md-datepicker>
        </div>
        <div ng-messages="form.fromDate.$error" ng-if="form.$submitted">
            <div ng-message="maxdate">From-date should be before to-date</div>
            <div ng-message="required">Fill in from-date</div>
        </div>

        <div class="form-group">
            <md-datepicker name="toDate" ng-model="ctrl.toDate" ng-required="ctrl.fromDate" md-min-date="ctrl.fromDate"></md-datepicker>
        </div>
        <div ng-messages="form.toDate.$error" ng-if="form.$submitted">
            <div ng-message="mindate">To-date should be after from-date</div>
            <div ng-message="required">Fill in from-date</div>
        </div>

        <button type="submit">Submit</button>
    </form>

如果我从日期1/1/2和日期1/1/1中选择,然后单击“提交”,则仅显示所需的错误消息。 检查$ error对象时,我看到当我单击提交时清除了mindate / maxdate属性。

我假设这是由于md-datepicker没有设置模型值,如果输入值根据required,min,max等规则无效。

有可能以某种方式解决这个问题吗?

编辑: 我认为问题是角度是使用模型值在单击提交而不是输入值后应用表单错误。

如果我输入1/1/2作为fromDate并单击“提交”,则输入1/1/1作为日期,将显示正确的错误消息。

1 个答案:

答案 0 :(得分:0)

当表单加载toDate并且fromDate为空时!我对吗?? 如果toDate和fromDate为空,那么请分别用dayBeforeDate和currentDate初始化fromDate和toDate。

fromDate - 2017年3月22日

toDate - 2017年3月23日

相关问题