angular的表单

一般来讲表单可能遇到的问题：
1.如何数据绑定。
2.验证表单。
3.显示出错信息。
4.整个form的验证。
5.避免提交没有验证通过的表单。
6.防止多系提交。

input属性：
name
ng-model
ng-required
ng-minlength
ng-maxlength
ng-pattern
ng-change值变化时的回调

Form控制变量
字段是否未更改
formName.inputFieldName.$pristine
字段是否更改
formName.inputFieldName.$dirty
字段有效
formName.inputFieldName.$valid
字段无效
formName.inputFieldName.$invalid
字段错误信息
formName.inputfieldName.$error

一个简单的表格的输入框的判断

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <link rel="stylesheet" href="../../vendor/bootstrap3/css/bootstrap.min.css"/>

</head>

<body>

<div ng-app="myApp" style="margin-top: 100px;">

    <form name="myForm" action="kittencup.php" ng-controller="firstController" class="container form-horizontal">

        <div class="form-group" ng-class="{'has-error':myForm.username.$dirty && myForm.username.$invalid}">

            <label class="col-sm-2 control-label">用户名</label>

            <div class="col-sm-10">

                <input type="text" autocomplete="off" name="username" ng-pattern="/^[a-zA-Z]{1}/" ng-required="true" ng-minlength="5" ng-maxlength="10" ng-model="data.username" class="form-control" placeholder="用户名">

                <div ng-show="myForm.username.$dirty && myForm.username.$error.maxlength" class="alert alert-danger help-block">

                    用户名长度不能超过10位

                </div>

                <div ng-show="myForm.username.$dirty && myForm.username.$error.minlength" class="alert alert-danger help-block">

                    用户名长度不能小于5位

                </div>

                <div ng-show="myForm.username.$dirty && myForm.username.$error.pattern" class="alert alert-danger help-block">

                    用户名必须已英文字母开始

                </div>

            </div>

        </div>

        <div class="form-group" ng-class="{'has-error':myForm.password.$dirty && myForm.password.$invalid}">

            <label class="col-sm-2 control-label">密 码</label>

            <div class="col-sm-10">

                <input type="password" autocomplete="off" name="password" ng-required="true" ng-minlength="5" ng-maxlength="10" ng-model="data.password" class="form-control" placeholder="密码">

                <div ng-show="myForm.password.$dirty && myForm.password.$error.maxlength" class="alert alert-danger help-block">

                    密码长度不能超过10位

                </div>

                <div ng-show="myForm.password.$dirty && myForm.password.$error.minlength" class="alert alert-danger help-block">

                    密码长度不能小于5位

                </div>

            </div>

        </div>

        <div class="form-group" ng-class="{'has-error':myForm.passwordConfirm.$dirty && myForm.passwordConfirm.$invalid}">

            <label class="col-sm-2 control-label">确认密码</label>

            <div class="col-sm-10">

                <input type="password" autocomplete="off" name="passwordConfirm" ng-required="true" ng-model="data.passwordConfirm" class="form-control" placeholder="确认密码">

                <div ng-show="myForm.password.$dirty && myForm.passwordConfirm.$dirty && data.password !== data.passwordConfirm" class="alert alert-danger help-block">

                    密码和确认密码不一致

                </div>

            </div>

        </div>

        <div class="form-group" ng-class="{'has-error':myForm.email.$dirty && myForm.email.$invalid}">

            <label class="col-sm-2 control-label">邮箱</label>

            <div class="col-sm-10">

                <input type="email" autocomplete="off" name="email" ng-required="true" ng-minlength="5" ng-maxlength="30" ng-model="data.email" class="form-control" placeholder="邮箱">

                <div ng-show="myForm.email.$dirty && myForm.email.$error.maxlength" class="alert alert-danger help-block">

                    邮箱长度不能超过30位

                </div>

                <div ng-show="myForm.email.$dirty && myForm.email.$error.minlength" class="alert alert-danger help-block">

                    邮箱长度不能小于5位

                </div>

                <div ng-show="myForm.email.$dirty && myForm.email.$error.email" class="alert alert-danger help-block">

                    邮箱格式不正确

                </div>

            </div>

        </div>

        <div class="form-group" ng-class="{'has-error':myForm.blog.$dirty && myForm.blog.$invalid}">

            <label class="col-sm-2 control-label">博客网址</label>

            <div class="col-sm-10">

                <input type="url" autocomplete="off" name="blog" ng-required="true" ng-minlength="5" ng-maxlength="30" ng-model="data.blog" class="form-control" placeholder="博客网址">

                <div ng-show="myForm.blog.$dirty && myForm.blog.$error.maxlength" class="alert alert-danger help-block">

                    网址长度不能超过30位

                </div>

                <div ng-show="myForm.blog.$dirty && myForm.blog.$error.minlength" class="alert alert-danger help-block">

                    网址长度不能小于5位

                </div>

                <div ng-show="myForm.blog.$dirty && myForm.blog.$error.url" class="alert alert-danger help-block">

                    网址格式不正确

                </div>

            </div>

        </div>

        <div class="form-group" ng-class="{'has-error':myForm.age.$dirty && myForm.age.$invalid}">

            <label class="col-sm-2 control-label">年龄</label>

            <div class="col-sm-10">

                <input type="number" autocomplete="off" name="age" min="10" max="99" ng-required="true" ng-model="data.age" class="form-control" placeholder="年龄">

                <div ng-show="myForm.age.$dirty && myForm.age.$error.max" class="alert alert-danger help-block">

                    年龄不能超过99岁

                </div>

                <div ng-show="myForm.age.$dirty && myForm.age.$error.min" class="alert alert-danger help-block">

                    年龄不能小于10岁

                </div>

            </div>

        </div>

        <div class="form-group">

            <label class="col-sm-2 control-label">性别</label>

            <div class="col-sm-10">

                <label class="radio-inline">

                    <input type="radio" ng-required="true" name="sex" ng-model="data.sex" value="1" /> 男

                </label>

                <label class="radio-inline">

                    <input type="radio" ng-required="true" name="sex" ng-model="data.sex" value="0" /> 女

                </label>

            </div>

        </div>

        <div class="form-group">

            <label class="col-sm-2 control-label">爱好</label>

            <div class="col-sm-10">

                <label class="checkbox-inline" ng-repeat="hobby in hobbies">

                    <input type="checkbox" ng-model="hobby.checked" name="hobby[]" ng-checked="data.hobbies === undefined ? false : data.hobbies.indexOf(hobby.id) !== -1" ng-click="toggleHobbySelection(hobby.id)"/> {{hobby.name}}

                </label>

            </div>

        </div>

        <div class="form-group">

            <label class="col-sm-2 control-label">出生地</label>

            <div class="col-sm-3">

                <select class="form-control" ng-change="data.area = false" ng-model="data.province" ng-options="x.id as x.name for x in cities | cityFilter:0"></select>

            </div>

            <div class="col-sm-3">

                <select class="form-control" ng-show="data.province" ng-model="data.area" ng-options="x.id as x.name for x in cities | cityFilter:data.province"></select>

            </div>

            <div class="col-sm-3">

                <select class="form-control" ng-required="true" ng-show="data.province && data.area" ng-model="data.city" ng-options="x.id as x.name for x in cities | cityFilter:data.area"></select>

            </div>

        </div>

        <div class="form-group">

            <label class="col-sm-2 control-label">只能输入偶数</label>

            <div class="col-sm-10">

               <input type="text" name="even" class="form-group" placeholder="偶数" ng-model="data.even" even>

                <div ng-show="myForm.even.$error.even" class="alert alert-danger help-block">

                    数字必须是偶数

                </div>

            </div>

        </div>

        <div class="form-group">

            <label class="col-sm-2 control-label">个人介绍</label>

            <div class="col-sm-10">

                <custom-text-area ng-model="data.introduct">aaa</custom-text-area>

                <custom-text-area ng-model="data.introduct"></custom-text-area>

            </div>

        </div>

        <div class="form-group">

           <div class="col-sm-offset-2 col-sm-10">

               <button type="submit" class="btn btn-default" ng-disabled="myForm.$invalid || data.hobbies === undefined || data.hobbies.length === 0">注册</button>

               <button type="reset" class="btn btn-default" ng-click="reset()">重置</button>

           </div>

        </div>

    </form>

</div>

<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>

<script type="text/javascript" src="app/index.js"></script>

</body>

</html>

angular.module('myApp', [])

    .filter('cityFilter', function () {

        return function (data, parent) {

            var filterData = [];

            angular.forEach(data, function (obj) {

                if (obj.parent === parent) {

                    filterData.push(obj);

                }

            })

            return filterData;

        }

    })

    .directive('even',function(){

        return {

            require : 'ngModel',

            link:function(scope,elm,attrs,ngModelController){

                ngModelController.$parsers.push(function(viewValue){

                    if(viewValue % 2 === 0){

                        ngModelController.$setValidity('even',true);

                    }else{

                        ngModelController.$setValidity('even',false);

                    }

                    return viewValue;

                });

//                ngModelController.$formatters.push(function(modelValue){

//                    return modelValue + 'kittencup';

//                })

            }

        };

    })

    .directive('customTextArea',function(){

        return {

            restrict:'E',

            template:'<div contenteditable="true"></div>',

            replace:true,

            require : 'ngModel',

            link:function(scope,elm,attrs,ngModelController){

                // view->model

                elm.on('keyup',function(){

                    scope.$apply(function(){

                        ngModelController.$setViewValue(elm.html());

                    });

                })

                ngModelController.$render = function(){

                    elm.html(ngModelController.$viewValue);

                }

            }

        };

    })

    .controller('firstController', ['$scope', function ($scope) {

        var that = this;

        $scope.hobbies = [

            {

                id: 1,

                name: '玩游戏'

            },

            {

                id: 2,

                name: '写代码'

            },

            {

                id: 3,

                name: '睡觉'

            },

        ];

        $scope.cities = [

            {

                name: '上海',

                parent: 0,

                id: 1

            },

            {

                name: '上海市',

                parent: 1,

                id: 2

            },

            {

                name: '徐汇区',

                parent: 2,

                id: 8

            },

            {

                name: '长宁区',

                parent: 2,

                id: 3

            },

            {

                name: '北京',

                parent: 0,

                id: 4

            },

            {

                name: '北京市',

                parent: 4,

                id: 5

            },

            {

                name: '东城区',

                parent: 5,

                id: 6

            },

            {

                name: '丰台区',

                parent: 5,

                id: 7

            },

            {

                name: '浙江',

                parent: 0,

                id: 9

            },

            {

                name: '杭州',

                parent: 9,

                id: 100

            },

            {

                name: '宁波',

                parent: 9,

                id: 11

            },

            {

                name: '西湖区',

                parent: 100,

                id: 12

            },

            {

                name: '北仑区‎',

                parent: 11,

                id: 13

            }

        ];

        $scope.data = {

            hobbies: [1, 2],

            city: 3

        };

        // 先保留一份默认值

        $scope.origData = angular.copy($scope.data);

        $scope.reset = function(){

            $scope.data = angular.copy($scope.origData);

            that.initCity();

            $scope.myForm.$setPristine();

        }

        // 让城市关联使用

        this.findCityId = function (parent) {

            var parentId;

            angular.forEach($scope.cities, function (city) {

                if (city.id === parent) {

                    parentId = city.parent;

                    return;

                }

            })

            return parentId;

        }

        this.initCity = function(){

            if ($scope.data.city !== undefined) {

                $scope.data.area = this.findCityId($scope.data.city);

                $scope.data.province = this.findCityId($scope.data.area);

            }

        }

        // 第一次打开页面 需要初始化一下

        this.initCity.call(this);

        $scope.toggleHobbySelection = function (id) {

            var index = -1;

            if ($scope.data.hobbies === undefined) {

                $scope.data.hobbies = [];

            } else {

                index = $scope.data.hobbies.indexOf(id);

            }

            if (index === -1) {

                $scope.data.hobbies.push(id);

            } else {

                $scope.data.hobbies.splice(index, 1);

            }

        }

    }]);

===========================================

myForm.username.$dirty 如果表单有更改则为true，如果没有更改则为false。

myForm.username.$error.maxlength 如果超出则为true，如果没有超出则为false。

ng-class="{'has-error':myForm.password.$dirty && myForm.password.$invalid}" 这句的意思是为了可以让写错后，边框变红。

autocomplete="off" 关闭自动提示的功能

ng-options="x.id as x.name for x in cities | cityFilter:0" 看链接：http://each.sinaapp.com/angular/tutorial/ng-options.html

ng-model 是angular原生的directive
可以通过require ngModel可以更深入的去处理数据的双向绑定。
ngModel里的属性

$parsers属性，保存了从viewValue向modelValue绑定过程中的处理函数，它们将来会依次执行。
$formatters它保存的是从modelValue向viewValue绑定过程中的处理函数
$setViewValue 当view发生了某件事情时，从view向model绑定调用
$setViewValue
$render
$setValidity
$viewValue
$modelValue

当reset的按钮同时又click事件时，先执行本身的reset然后执行click事件。

注意表单中这几个位置的写法，ng-model必须是$scope中给出的，不能写user.

angular的表单的更多相关文章

angular js 表单验证
<!doctype html> <html ng-app="myapp"> <head> <meta charset="UTF- ...
angular编写表单验证
angular编写表单验证一.整体概述表单内容如下图,包括常用的用户名.密码.确认密码.手机.邮箱等整体js代码很少,就一个指令用于写确认密码和密码是否相等.其他验证都是使用angular自带 ...
关于angular实现表单的一些问题
如何用angular实现表单的一些问题?核心步骤大概如下: 创建模型类创建控制此表单的组件. 创建具有初始表单布局的模板. 使用ngModel双向数据绑定语法把数据属性绑定到每个表单输入控件. 往每 ...
使用Angular提交表单
使用Angular提交表单我们准备在之前使用的<script>标签中设置我们的Angular应用.所以删除里面的内容,我们就可以开始了. 设置一个Angular应用步骤为: 1. 加载 ...
Angular.js表单以及与Bootatrap的使用
首先从angular.js的目录开始,如下图,知道了我们要学什么,然后再开始有目的的学习与对比. 1.从表达式开始: ng-app指令初始化一个 AngularJS 应用程序. ng-init指令初始 ...
angular验证表单
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>a ...
angular之表单验证与ngMessages
刚接触angular1.x很多经常用到的ngMessages的地方,这里顺便记一下,效果如下图: 如果引用了angular-messages.js报如下错误,说明你的angular.js和angula ...
Angular动态表单生成（八）
动态表单生成之拖拽生成表单(下) 我们的动态表单,最终要实现的效果与Form.io的在线生成表单的效果类似,可以参考它的demo地址:https://codepen.io/travist/full/x ...
Angular动态表单生成（七）
动态表单生成之拖拽生成表单(上) 这个功能就比较吊炸天了,之前的六篇,都是ng-dynamic-forms自带的功能,可能很多的说明官方的文档都已经写了,我只是个搬运工,而在这篇文章中,我将化身一个工 ...

随机推荐

postgresql----数据库表约束----PRIMARY KEY
五.PRIMARY KEY ---- 主键约束主键可以是单个字段,也可以是多个字段的组合.主键约束其实是UNIQUE和NOT NULL约束的组合,即主键必须是唯一,且各字段都是NOT NULL的. ...
HOJ Recoup Traveling Expenses(最长递减子序列变形)
A person wants to travel around some places. The welfare in his company can cover some of the airfar ...
load_1m
Database Sharding, The “Shared-Nothing” Approach DATABASE SHARDING
w将单个服务器上的单个数据库打碎为多个服务器上的单个数据库 http://www.agildata.com/database-sharding/ Database Sharding provides ...
scrapy爬虫系列之四--爬取列表和详情
功能点:如何爬取列表页,并根据列表页获取详情页信息? 爬取网站:东莞阳光政务网完整代码:https://files.cnblogs.com/files/bookwed/yangguang.zip 主 ...
django后台获取相同name名的数据
django后台获取相同name名的post数据html: <form method="post"> <input type="text" n ...
Get,Post请求方式详解
前几天工作中,所有表单我都采用post方法,头儿说那样不好,大型网站上一般都采用get方法,不理解. 在网上摘到一段比较有用的话减低服务器流量压力根据 HTTP 规范,GET 用于信息获取,而且应该 ...
LoadRunner-常用的函数
LoadRunner中,常用的函数有很多,这里只介绍编写性能测试脚本过程中那些必然用到的函数.本文重点关注这些典型函数的应用场合及注意点,至于函数详细使用说明请参见LoadRunner帮助文档. 1. ...
格式工厂将图片变小，有500kb变为16kb
1:打开格式工厂,选择图片栏>jpg 2:点击添加文件,选择要处理的图片.点击输出配置,配置转换后的大小(可手动调整),越小占用空间越少,点击确定 3: 主页面点击转换按钮,转换成功后,显示 ...
跟我学Makefile（六）
shell 函数 :和反引号“`”是相同的功能 . shell 函数把执行操作系统命令后的输出作为函数返回. contents := $(shell cat foo) files := $(shell ...

angular的 表单

angular的 表单的更多相关文章

随机推荐

热门专题

angular的表单

angular的表单的更多相关文章