zoukankan      html  css  js  c++  java
  • AngularJs自定义表单验证

        如何按照自己的需求来做好ng的表单验证,不多说直接上例子

    <h1>自定义表单验证->限定只能输入偶数</h1>
    <form name="myForm" ng-app="app" ng-controller="test">
        <div class="form-group">
            <div col-md-4>
                <label class="control-label">数字:</label>
            </div>
            <div col-md-8>
                <input type="number" name="test" ng-model="data.even" even/>
                <div ng-show="myForm.test.$error.even">必须是偶数</div>
            </div>
        </div>
    </form>
    

      指令

     app.directive("even",function() {
                return{
                    require: 'ngModel',//这个require,我简单的理解为继承的意思把。对应link函数中的第四个参数
                    link:function(scope, element, attrs, ngModelController) {
                        ngModelController.$parsers.push(function (viewValue) {  //ngModel的双向绑定机制,
                            //$parser 这个服务是,从ViewModel->ModelView里面来。
                            if (viewValue % 2 === 0) {
                                ngModelController.$setValidity("even", true);
                            } else {
                                ngModelController.$setValidity("even", false);
                            }
                            return viewValue; //处理完之后,要把值返回
                        });
                    }
    
            }
            });

            欢迎大家学习分享,谢谢

        

  • 相关阅读:
    观众查询界面
    排球积分程序
    产品会议
    本周工作量及进度统计
    排球积分规则
    我与计算机
    排球记分员
    怎样成为一个高手观后感
    第十八周冲刺
    十六周
  • 原文地址:https://www.cnblogs.com/gdouzz/p/6559045.html
Copyright © 2011-2022 走看看