angularjs (Form)

作者:匿名 浏览:168 日期:2017-07-17

Forms

为了让form以及控件、ngModel富有样式,可以增加以下class

通过在元素上添加repuired等验证指令  angularjs自动更具状态切换这些class

  • ng-valid (验证成功)

  • ng-invalid (验证失败)

  • ng-pristine(从未输入过)

  • ng-dirty(输入国)

angular中,表单是FormController的一个实例。表单实例可以随意地使用name属性暴露到scope中(只可意会,不可言传啊。。)

<!DOCTYPE HTML>
<html ng-app="ControlState">
<head>
    <meta charset="UTF-8">
    <title>ControlState</title>
    <style type="text/css">
        .ng-cloak {
            display: none;
        }
        .css-form input.ng-invalid.ng-dirty {
            background-color: #fa787e;
        }
        .css-form input.ng-valid.ng-dirty {
            background-color: #78fa89;
        }
    </style>
</head>
<body>
<div ng-controller="MyCtrl">
    <form novalidate name="formName">
        名字: <input ng-model="user.name" name="userName" type="text" required><br/>
        <div ng-show="formName.userName.$dirty&&formName.userName.$invalid">
            <span>请填写名字</span>
        </div>

        Email: <input ng-model="user.email" name="userEmail" type="email" required><br/>
        <div ng-show="formName.userEmail.$dirty && formName.userEmail.$invalid">提示:
            <span ng-show="formName.userEmail.$error.required">请填写Email</span>
            <span ng-show="formName.userEmail.$error.email">这不是一个有效的Email</span>
        </div>
        性别: <input value="男" ng-model="user.gender" type="radio">男
        <input value="女" ng-model="user.gender" type="radio">女
        <br/>
        <input type="checkbox" ng-model="user.agree" name="userAgree" required/>我同意:
        <input type="text" ng-show="user.agree" ng-model="user.agreeSign" required/>
        <br/>
        <div ng-show="!formName.userAgree || !user.agreeSign">请同意并签名~</div>
        <button ng-click="reset()" ng-disabled="isUnchanged(user)">RESET</button>
        <button ng-click="update(user)" ng-disabled="formName.$invalid || isUnchanged(user)">SAVE</button>
    </form>
    <pre>form = {{user | json}}</pre>
    <pre>saved = {{saved | json}}</pre>
</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
    var app = angular.module("ControlState", []);
    app.controller("MyCtrl", function ($scope,$window) {
        $scope.saved = {};
        $scope.update = function(user) {
            $scope.saved = angular.copy(user);
        };

        $scope.reset = function() {
            $scope.user = angular.copy($scope.saved);
        };

        $scope.isUnchanged = function(user) {
            return angular.equals(user, $scope.saved);
        };

        $scope.reset();
    });
</script>
</body>
</html>

custrom Validation

  • Model到View更新   无论什么时候Model发生改变,所有的ngModelController.$formatters(model发生改变时触发数据有效验证和格式化转变)数组中的function将排队执行,所以在这里每一个function都有机会去格式化model的值,并且通过NgModelController.$setValidity修改空间的验证状态。

  • View到Model更新  无论任何时候用户与控件发生交互,将会触发NgModelCtroller.$setViewValue。这时候轮到执行NgModelController.$parsers(当控件从dom取值之后,将会执行这个数组中的所有方法,对值进行审查过滤或转换,也进行验证)数组中的所有方法。

在下面的例子中我们将创建两个directive

  • 第一个是integer,它负责验证输入到底是不是一个有效的整数。例如1.23是一个非法的值,因为它包含小数部分。注意,我们通过在数组头部插入(unshift)来代替在尾部插入(push),这因为我们想它首先执行并使用这个控件的值(估计这个Array是当作队列来使用的),我们需要在转换发生之前执行验证函数。

  • 第二个directivesmart-float。他将”1.2”和”1,2”转换为一个合法的浮点数”1.2”。注意,我们在这不可以使用HTML5input类型”number”,因为浏览器不允许用户输入我们预期的非法字符,如”1,2”(它只认识”1.2”)。

<!DOCTYPE HTML>
<html ng-app="CustomValidation">
<head>
    <meta charset="UTF-8">
    <title>CustomValidation</title>
    <style type="text/css">
        .ng-cloak {
            display: none;
        }
        .css-form input.ng-invalid.ng-dirty {
            background-color: #fa787e;
        }
        .css-form input.ng-valid.ng-dirty {
            background-color: #78fa89;
        }
    </style>
</head>
<body>
<div>
    <form novalidate name="formName">
        <div>
            大小(整数 0 - 10):<input integer type="number" ng-model="size" name="size" min="0" max="10"/>{{size}}{{formName.size.$error.integer}}<br/>

            <span ng-show="formName.size.$error.integer">这不是一个有效的整数</span>
            <span ng-show="formName.size.$error.min || formName.size.$error.max">
                数值必须在0到10之间
            </span>
        </div>
        <div>
            长度(浮点数):
            <input type="text" ng-model="length" name="length" smart-float/>
            {{length}}<br/>
            <span ng-show="formName.length.0error.float">这不是一个有效的浮点数</span>
        </div>
    </form>
</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
    var app = angular.module("CustomValidation", []);
    var INTEGER_REGEXP = /^\-?\d*$/;
    app.directive("integer", function () {
        return {
            require:"ngModel",//NgModelController
            link:function(scope,ele,attrs,ctrl) {

                //View - >Model的更新
                ctrl.$parsers.unshift(function (viewValue) {
                
                //model -> view的更新吗??
                //console.log(viewValue, '++');
                    if(INTEGER_REGEXP.test(viewValue)) {  
                        ctrl.$setValidity("integer", true);
                        return viewValue;
                    }else {
                        ctrl.$setValidity("integer", false);
                        return undefined;
                    }
                });
            }
        };
    });
    var FLOAT_REGEXP = /^\-?\d+(?:[.]\d+)?$/;
    app.directive("smartFloat", function () {
        return {
            require:"ngModel",
            link:function(scope,ele,attrs,ctrl) {
                ctrl.$parsers.unshift(function(viewValue) {
                    if(FLOAT_REGEXP.test(viewValue)) {
                        ctrl.$setValidity("float", true);
                        return parseFloat(viewValue);
                    }else {
                        ctrl.$setValidity("float", false);
                        return undefined;
                    }
                });
            }
        }
    });
</script>
</body>
</html>

angular实现了所有HTML的基础控件(inputselecttextarea),能胜任大多数场景。然而,如果我们需要更加灵活,我们可以通过编写一个directive来实现自定义表单控件的目的。

  为了制定控件和ngModel一起工作,并且实现双向数据绑定,它需要:

  • 实现render方法,是负责在执行完并通过所有NgModelController.$formatters方法后,呈现数据的方法。

  • 调用$setViewValue方法,无论任何时候用户与控件发生交互,model需要进行响应的更新。这通常在DOM事件监听器里实现。

<!DOCTYPE HTML>
<html ng-app="CustomControl">
<head>
    <meta charset="UTF-8">
    <title>CustomControl</title>
    <style type="text/css">
        .ng-cloak {
            display: none;
        }
        div[contenteditable] {
            cursor: pointer;
            background-color: #D0D0D0;
        }
    </style>
</head>
<body ng-controller="MyCtrl">
<div>
    <div contenteditable="true" ng-model="content" title="点击后编辑">My Little Dada</div>
    <pre>model = {{content}}</pre>
    <button ng-click="reset()">reset model tirgger model to view($render)</button>
</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
    var app = angular.module("CustomControl", []);
    app.controller("MyCtrl", function ($scope) {
        $scope.reset = function() {
            $scope.content = "My Little Dada";
        };
    });
    app.directive("contenteditable", function () {
        return {
            require:"ngModel",
            link:function (scope, ele, attrs, ctrl) {
                //view -> model
                ele.bind("blur keyup",function() {
                    scope.$apply(function() {
                        console.log("setViewValue");
                        ctrl.$setViewValue(ele.text());
                    });
                });

                //model -> view
                ctrl.$render = function() {
                    //当根scope的model发生改变时 $render触发(00!)我这么认为
                    ele.html(scope.content);
                };
                //读取初始值
                ctrl.$setViewValue(ele.text());
            }
        };
    });
</script>
</body>
</html>


标签:

相关文章

    作者最新