bwin娱乐官网平台AngularJs表单验证时间指令

2016/12 01 13:12
此文章不得转载,如有需要请联系网站管理员。

一度的温暖,一百度的爱情,来自于bwin娱乐官网平台的点点滴滴

我想写一个指令用来校验终了工夫在末尾工夫之后的指令


angular.moduleMyApp
    .directivedateAfter,function$timeout{
        return{
            require: "ngModel",
            priority:1,
            link:function scope, element, attrs, ngModel {
                if!ngModel {
                    throw new Error"dateAfter cant find ng-model directive";
                }

                scope.attrs = attrs;
                //ngModel.$pending[dateAfter] = true;
                //ngModel.$error.dateAfter = true;
                scope.$watchattrs.dateAfter,functionnewValue,oldValue,scope{
                    ifnewValue{
                        var value = angular.copyngModel.$viewValue;
                        ngModel.$setViewValue"";
                        ngModel.$setViewValuevalue;
                        //console.logrun validate;
                        //customValidatorngModel.$modelValue;
                    }
                }

                function formatDatevalue{
                    iftypeofvalue == "object" || typeofvalue == "string"{
                        ifmomentvalue.isValid{
                            return value;
                        }
                    }
                    return undefined;
                }

                function compareDated1,d2{
                    //console.logd1,d2;
                    return momentd1.isSamed2 || momentd1.isAfterd2;
                }

                //判别能否为undefined;
                function checkValuevalue,msg{
                    iftypeof value == "undefined"{
                        throw new Errormsg;
                    }
                }

                //用于表单值本身变革时做校验
                var customValidator = function value {
                    //console.logcustomValidator,ngModel;
                    if!value{
                        ngModel.$setValidity"dateAfter", false;
                        return;
                    }

                    //假如attrs.dateAfter没有谋略出来的时分,直接前往value
                    ifattrs.dateAfter == ""{
                        return value;
                    }
                    //获得待比较的值
                    var cmpDate = formatDateattrs.dateAfter;
                    //获取model的值
                    var valueDate = formatDatevalue;
                    //假如model的值有题目
                    checkValuevalueDate,model有题目;
                    //假如待比较的值有题目。
                    checkValuecmpDate,dateAfter有题目;
                    //验证值的能否在待比较日期之后
                    var validity = ngModel.$isEmptyvalue || compareDatevalueDate,cmpDate;
                    //设置验证后果
                    console.debugvalidity,$error,$pending,validity,ngModel.$error,ngModel.$pending;
                    ngModel.$setValidity"dateAfter", validity;
                    return validity?value:undefined;
                };

                //Model的数据转换为View交互控件表现的值
                ngModel.$formatters.pushcustomValidator;
                //将交互控件失掉的View值转换为Model数据
                ngModel.$parsers.pushcustomValidator;

            }
        }
    }

运用时分在html中参加,此处我用的日历组件,日期款式按照YYYY-MM-DD。

<form name="myForm">
<input name="stTime" type="text" ng-model="startTime" />
<input name="lvTime" type="text" date-after="{{startTime}}" ng-model="endTime" />
</form>

以上代码是可以运转。

但是当我在$watch中直接实行customValidatorngModel.$modelValue时,
修正末尾工夫到终了工夫之后,并不会照应如下提示。
而是需求经过改动model的值让它自己做校验才干照应。

<div ng-show="myForm.lvTime.$error.dateAfter">
    终了工夫应在末尾工夫之后
</div>

固然题目是处理了。总以为强行修正一波model值,
让它做校验这种处理办法不太好。
问下各位大神有没有更好的办法

其后自己又写了一个dateBefore的指令,跟这个指令类似。两个指令都不需求$watch那个其他的变量。
提示语改成了
dateBeforeError ->  XXX应在XXX之前  
dateAfterError - >  XXX应在XXX之后。

上个代码供参考。


.directivedateBefore,function{
        return{
            require: "ngModel",
            link:function scope, element, attrs, ngModel {
                if!ngModel {
                    throw new error"beforeToday cant find ng-model directive";
                }

                function formatDatevalue{
                    iftypeofvalue == "object" || typeofvalue == "string"{
                        ifmomentvalue.isValid{
                            return value;
                        }
                    }
                    return undefined;
                }

                function compareDated1,d2{
                    return momentd1.isSamed2 || momentd1.isBefored2;
                }

                //判别能否为undefined;
                function checkValuevalue,msg{
                    iftypeof value == "undefined"{
                        throw new Errormsg;
                    }
                }

                var customValidator = function value {
                    if!value{
                        ngModel.$setValidity"dateAfter", false;
                        return;
                    }

                    //假如attrs.dateAfter没有谋略出来的时分,直接前往value
                    ifattrs.dateBefore == ""{
                        return value;
                    }

                    //获得待比较的值
                    var cmpDate = formatDateattrs.dateBefore;
                    //获取model的值
                    var valueDate = formatDatevalue;
                    //假如model的值有题目
                    checkValuevalueDate,model有题目;
                    //假如待比较的值有题目。
                    checkValuecmpDate,dateBefore有题目;
                    //验证值的能否在待比较日期之前
                    var validity = ngModel.$isEmptyvalue || compareDatevalueDate,cmpDate;
                    ngModel.$setValidity"dateBefore", validity;
                    return validity ? value : undefined;
                };
                ngModel.$formatters.pushcustomValidator;
                ngModel.$parsers.pushcustomValidator;
            }
        }
    }

.directivedateAfter,function$timeout{
        return{
            require: "ngModel",
            priority:1,
            link:function scope, element, attrs, ngModel {
                if!ngModel {
                    throw new Error"dateAfter cant find ng-model directive";
                }


                function formatDatevalue{
                    iftypeofvalue == "object" || typeofvalue == "string"{
                        ifmomentvalue.isValid{
                            return value;
                        }
                    }
                    return undefined;
                }

                function compareDated1,d2{
                    //console.logd1,d2;
                    return momentd1.isSamed2 || momentd1.isAfterd2;
                }

                //判别能否为undefined;
                function checkValuevalue,msg{
                    iftypeof value == "undefined"{
                        throw new Errormsg;
                    }
                }

                //用于表单值本身变革时做校验
                var customValidator = function value {
                    //console.logcustomValidator,ngModel;
                    if!value{
                        ngModel.$setValidity"dateAfter", false;
                        return;
                    }

                    //假如attrs.dateAfter没有谋略出来的时分,直接前往value
                    ifattrs.dateAfter == ""{
                        return value;
                    }
                    //获得待比较的值
                    var cmpDate = formatDateattrs.dateAfter;
                    //获取model的值
                    var valueDate = formatDatevalue;
                    //假如model的值有题目
                    checkValuevalueDate,model有题目;
                    //假如待比较的值有题目。
                    checkValuecmpDate,dateAfter有题目;
                    //验证值的能否在待比较日期之后
                    var validity = ngModel.$isEmptyvalue || compareDatevalueDate,cmpDate;
                    //设置验证后果
                    ngModel.$setValidity"dateAfter", validity;
                    return validity?value:undefined;
                };

                //Model的数据转换为View交互控件表现的值
                ngModel.$formatters.pushcustomValidator;
                //将交互控件失掉的View值转换为Model数据
                ngModel.$parsers.pushcustomValidator;

                
            }
        }
    }

<form name="myForm">
    <input name="stTime"  type="text" date-before="{{levTime}}"  ng-model="startTime"/>
    <input name="levTime" type="text" date-after="{{startTime}}" ng-model="endTime"/>
</form>


<b ng-show=myForm.stTime.$error.dateBefore == true>末尾工夫请选择在终了工夫之前</b>
<b ng-show=myForm.levTime.$error.dateAfter == true>终了工夫请选择在末尾工夫之后</b>

由于代码没贴全。需求的可以根据这个修正。。。

(看完/读完)这篇文章有何感想! 来看看bwin娱乐官网平台是怎么评论的吧!

--转载请注明: bwin娱乐官网_bwin娱乐官网平台_bwin娱乐官网平台下载 » bwin娱乐官网平台AngularJs表单验证时间指令

发表评论

(必填)