对日期输入的min属性进行实时绑定

Question

我正在尝试创建一个表单，其中sessionStart日期必须小于sessionEnd日期，反之亦然。

我已经将日期输入字段的min属性绑定到javascript变量。 表单验证可以正常进行，但是没有显示段落标签，其中包含错误消息。

代码：

<ion-modal-view>
    <ion-header-bar>
        <h1 class="title">May I know some details !</h1>
    </ion-header-bar>
    <ion-content>
        <form ng-submit = "submitModal();" name = "myform" novalidate>
            <label class="item item-input">
                <span class="input-label">Session Start</span>
                <input type="date" ng-model = "modalData1.sessionStart" required name = "sessionStart"
                       max = "{{modalData1.sessionEnd | date:'yyyy-MM-dd'}}"><br>
            </label>
            <p ng-show = "myform.sessionStart.$dirty && myform.sessionStart.$error.required" class = "error">
                    &nbsp;*This is a required field
            </p>
            //This paragraph does not show up
            <p ng-show = "myform.sessionStart.$error.max" class = "error">
                    &nbsp;*Date must be before Session End
            </p>
            <label class="item item-input">
                <span class="input-label">Session End</span>
                <input type="date" ng-model = "modalData1.sessionEnd" required name = "sessionEnd"
                       min = "{{modalData1.sessionStart | date:'yyyy-MM-dd'}}">
            </label>
            <p ng-show = "myform.sessionEnd.$dirty && myform.sessionEnd.$error.required" class = "error">
                     &nbsp;*This is a required field
            </p>
            <p ng-show = "myform.sessionStart.$error.min" class = "error">
                    &nbsp;*Date must be after Session Start
            </p>
            <label class="item item-input">
                <span class="input-label">Compulsary Attendence</span>
                <input type="number" min = "0" max = "100" ng-model = "modalData1.compAtt" required 
                       name = "compAtt">
            </label>
            <p ng-show = "myform.compAtt.$error.min || myform.compAtt.$error.max" class = "error">
                     &nbsp;*It should be between 0 to 100
            </p>
            <p ng-show = "myform.compAtt.$error.required && myform.compAtt.$dirty" class = "error">
                     &nbsp;*It is a required field
            </p>
            <label class="item item-input item-select">
                <span class="input-label">Lectures per day</span>
                <select ng-model = "modalData1.lecPerDay">
                    <option selected>1</option>
                    <option ng-repeat = "element in [2,3,4,5,6,7,8,9,10,11]">
                        {{element}}
                    </option>
                </select>
            </label>
            <label class="item item-input item-select">
                <span class="input-label">No. of Holidays</span>
                <select ng-model = "modalData1.holiday" name = "holiday">
                    <option ng-repeat = "i in [0,1,2,3,4,5]">{{i}}</option>
                </select>
            </label>
            <br>
            <input type = "submit" value = "Submit Data" class = "button button-royal button-block"
                   ng-disabled = "myform.$invalid">
        </form>
    </ion-content>
</ion-modal-view>

Answer 1

如果它们是约会对象，则直接比较它们

<p ng-show = "modalData1.sessionStart > modalData1.sessionEnd" class = "error">
         &nbsp;*Date must be before Session End
 </p>