angular的 表单
一般来讲表单可能遇到的问题：
1.如何数据绑定。
2.验证表单。
3.显示出错信息。
4.整个form的验证。
5.避免提交没有验证通过的表单。
6.防止多系提交。
input属性：
name
ng-model
ng-required
ng-minlength
ng-maxlength
ng-pattern
ng-change值变化时的回调
{{myForm.username.$error}}
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自带的功能,可能很多的说明官方的文档都已经写了,我只是个搬运工,而在这篇文章中,我将化身一个工 ...
随机推荐
- SElinux以及防火墙的关闭
[root@localhost targeted]# pwd/etc/selinux/targeted[root@localhost targeted]# getsebool -a|grep samb ...
- 模拟退火算法A Star not a Tree?(poj2420)
http://write.blog.csdn.net/postedit A Star not a Tree? Time Limit: 1000MS Memory Limit: 65536K Tot ...
- HDU 1103 Flo's Restaurant(模拟+优先队列)
Flo's Restaurant Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- debug kibana in chrome
kibana5.6.5版本 在kibana根目录运行命令:NODE_OPTIONS='--inspect --debug' npm start 也可以尝试命令:NODE_OPTIONS="- ...
- 在CentOS7下从0开始搭建docker并发布tomcat项目
一切从0开始,我也是个小白: 1.检查你的系统是不是高于3.8的内核,如果没有请升级CentOS7或者Ubuntu 14 #uname -a 2.CentOS7下安装docker #yum -y in ...
- linux彻底删除nginx
卸载 删除 nginx 1.删除nginx,–purge包括配置文件 sudo apt-get --purge remove nginx 1 2.自动移除全部不使用的软件包 sudo apt-get ...
- CTE的妙用
转自:https://blog.csdn.net/kk185800961/article/details/42535223 之前在2本书看到过with as 子句的一个简单例子,网上没找到相关资料. ...
- mysql 数据操作 单表查询 group by 聚合函数
强调: 如果我们用unique的字段作为分组的依据,则每一条记录自成一组,这种分组没有意义 多条记录之间的某个字段值相同,该字段通常用来作为分组的依据 如果按照每个字段都是唯一的进行分组,意味着按照这 ...
- R语言基本语法
R语言基本语法 基本数据类型 数据类型 向量 vector 矩阵 matrix 数组 array 数据框 data frame 因子 factor 列表 list 向量 单个数值(标量)没有单独的数据 ...
- 破解NET的四大神器（转）
原文地址 原本这篇文章可以更早一星期写出来与大家分享,由于某方面的原因耽搁到现在,心里竟有那么一点好像对不住大家的感觉.这当然与神器有关,因为我发现利用这四大神器我似乎觉得几乎所有的NET程序破解都不 ...