沛东通过本文主要向大家介绍了angular 提交form,angular2 formbuilder,angular form表单提交,angular项目实例,angular实例等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
先上效果页面：
其中几个知识点
1、angularJs提供了几个新的type类型：
type="password" type="email" type="number" type="url"</div>
2、几个参数含义
ng-required //是否必填，true/false
ng-minlength //最小长度，数字
ng-maxlength //最大长度，数字
min //最小数字，数字，仅在type="number"下
max //最小数字，数字，仅在type="number"
3、几个form控制变量，先来一段代码
<form role="form" name="myform" > <div class="form-group" > <label class="col-sm-2">用户名</label> <div class="col-sm-8"> <input type="text" name="username" class="form-control" placeholder="请输入用户名"></div> </div> </form></div>
formName.inputFieldName.$pristine //字段是否未更改,对应上面的html代码即为 myform.username.$pristine formName.inputFieldName.$dirty //字段是否更改,对应上面的html代码即为 myform.username.$dirty formName.inputFieldName.$valid //字段有效,对应上面的html代码即为 myform.username.$valid formName.inputFieldName.$invalid //字段无效,对应上面的html代码即为 myform.username.$invalid formName.inputFieldName.$error //字段错误信息，使用频率比较高,对应上面的html代码即为 myform.username.$error</div>
4、下面直接上代码，首先是html代码，使用了bootstrap.css样式，在结尾引入了angular
<!DOCTYPE html>
<html>
<head>
<title>form验证</title>
<link rel="stylesheet" type="text/css" href="style/bootstrap.css">
</head>
<body ng-app="formModule">
<div style="margin-top: 60px;">
<form role="form" name="myform" class="form-horizontal container" ng-controller="formctrl">
<!-- 用户名 -->
<div class="form-group" ng-class="{'has-error':myform.username.$dirty && myform.username.$invalid}">
<label class="col-sm-2">用户名</label>
<div class="col-sm-8">
<input type="text" name="username" ng-minlength="5" ng-maxlength="10" ng-required="true" ng-model="data.username" class="form-control" placeholder="请输入用户名"></div>
<div class="col-sm-2 text-danger" ng-show="myform.username.$error.minlength">用户名必须大于5位</div>
<div class="col-sm-2" ng-show="myform.username.$error.maxlength">用户名必须小于于10位</div>
</div>
<!-- 密码 -->
<div class="form-group" ng-class="{'has-error':myform.password.$dirty&&myform.password.$invalid}">
<label class="col-sm-2">密 码</label>
<div class="col-sm-8">
<input type="password" name="password" ng-minlength="10" ng-required="true" ng-model="data.password" class="form-control" placeholder="请输入密码"></div>
<div class="col-sm-2 text-danger" ng-show="myform.password.$error.minlength">密码必须大于10位</div>
</div>
<!-- 确认密码 -->
<div class="form-group" ng-class="{'has-error':myform.passwordconfirm.$dirty&&myform.passwordconfirm.$invalid}">
<label class="col-sm-2">确认密码</label>
<div class="col-sm-8">
<input type="password" name="passwordconfirm" ng-required="true" ng-model="data.passwordconfirm" class="form-control" placeholder="请输入确认密码"></div>
<div class="col-sm-2 text-danger" ng-show="data.passwordconfirm!=data.password&&myform.password.$dirty&&myform.passwordconfirm.$dirty">两次密码不一致</div>
</div>
<!-- 邮箱 -->
<div class="form-group" ng-class="{'has-error':myform.email.$dirty&&myform.email.$invalid}">
<label class="col-sm-2">邮 箱</label>
<div class="col-sm-8">
<input type="email" name="email" ng-required="true" ng-model="data.email" class="form-control" placeholder="请输入邮箱地址"></div>
<div class="col-sm-2 text-danger" ng-show="myform.email.$error.email">请输入正确邮箱地址</div>
</div>
<!-- 博客 -->
<div class="form-group" ng-class="{'has-error':myform.age.$dirty&&myform.age.$invalid}">
<label class="col-sm-2">年 龄</label>
<div class="col-sm-8">
<input type="number" name="age" ng-required="true" min="10" max="99" ng-model="data.age" class="form-control" placeholder="请输入您的年龄"></div>
<div class="col-sm-2 text-danger" ng-show="myform.age.$error.min&&myform.age$error.max">请输入正确年龄</div>
</div>
<!-- 年龄 -->
<div class="form-group" ng-class="{'has-error':myform.blog.$dirty&&myform.blog.$invalid}">
<label class="col-sm-2">博 客</label>
<div class="col-sm-8">
<input type="url" name="blog" ng-required="true" ng-model="data.blog" class="form-control" placeholder="请输入博客地址"></div>
<div class="col-sm-2 text-danger" ng-show="myform.blog.$error.url">请输入正确博客地址</div>
</div>
<!-- 性别 -->
<div class="form-group">
<label class="col-sm-2">性 别</label>
<div class="col-sm-8">
<label class="radio-inline">
<input type="radio" value="1" ng-model="data.sex" name="sex"> 男</label>
<label class="radio-inline">
<input type="radio" value="2" ng-model="data.sex" name="sex"> 女</label>
</div>
</div>
<!-- 爱好 -->
<div class="form-group">
<label class="col-sm-2">爱 好</label>
<div class="col-sm-8">
<label ng-repeat="hoppy in hoppies" class="checkbox-inline">
<input type="checkbox" name="hoppy[]" ng-click="togglehoppy()" ng-model="hoppy.checked" >{{hoppy.name}}
</label>
</div>
<div class="col-sm-2">{{data.Ahoppy.join('、')}}</div>
</div>
<!-- 地址 -->
<div class="form-group">
<label class="col-sm-2">地 址</label>
<div class="col-sm-3">
<select class="form-control" ng-model="data.provinec" 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.provinec" ng-model="data.area" ng-options="x.id as x.name for x in cities | cityfilter:data.provinec"></select>
</div>
<div class="col-sm-3">
<select class="form-control" ng-show="data.area" ng-model="data.city" ng-options="x.id as x.name for x in cities | cityfilter:data.area"></select>
</div>
</div>
</form>
</div>
<script src="js/angular.js"></script>
<script src="js/app.js"></script>
</body>
</html>
</div>
下面为js代码（可能其中有些不妥之处，请指正，谢谢）
(function(window) {
'use strict';
var mymodule = angular.module('formModule', []);
// 城市删选器
mymodule.filter('cityfilter',function(){
return function(data,parent){
var cityData=[];
angular.forEach(data, function(item, key){
if(item.parent==parent){
cityData.push(item);
}
});
return cityData;
}
});
mymodule.controller('formctrl', ['$scope', function($scope) {
// 设定初始状态
$scope.data={
Ahoppy:[1,3]
}
// 爱好对象
$scope.hoppies = [
{id: 1,name: '玩游戏',checked: istrue(1)},
{id: 2