您的位置：首页 > Web前端 > AngularJS

angular 1.2.29版本下动态添加多个表单、校验全部、提交、ng-form方案

2017-12-23 17:00 961 查看

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hasError{
border: 1px red solid;
}
.errorMsg{
color: red
}
</style>
<body ng-app="myApp" ng-controller="myCtrl">
<button ng-click="addRow()">添加</button>
<form name="userForm" novalidate ng-submit="userForm.$valid?submit():''">
<table>
<thead>
<tr>
<th>字段一</th>
<th>字段二</th>
<th>字段三</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in jsonList">
<td>
<input type="text" readonly ng-model="item.name1">
</td>
<td>
<input type="text" readonly ng-model="item.name2">
</td>
<td>
<input type="text" readonly ng-model="item.name3">
</td>
</tr>
<tr ng-repeat="item in jsonListAdd">
<td>
<ng-form name="tel{{$index}}">
<input
type="text"
placeholder="请输入手机号"
ng-model="item.name1"
required
ng-pattern = "/^(13|15|17|18|14)[0-9]{9}$/"
name="tel"
ng-class="{ 'hasError' : {{'tel' + $index}}.tel.$dirty && {{'tel' + $index}}.tel.$invalid}"
>
<p ng-show="{{'tel' + $index}}.tel.$dirty && {{'tel' + $index}}.tel.$invalid" class="errorMsg">error message1.</p>

</form>
</td>
<td>
<ng-form name="email{{$index}}">
<input type="text"
type="text"
placeholder="请输入6位验证码"
ng-model="item.name2"
required
ng-pattern = "/^[^\u2E80-\u9FFF]{6,16}$/"
name="email"
ng-class="{ 'hasError' : {{'email' + $index}}.email.$dirty && {{'email' + $index}}.email.$invalid}"
>
<p ng-show="{{'email' + $index}}.email.$dirty && {{'email' + $index}}.email.$invalid" class="errorMsg">error message2.</p>
</form>
</td>
<td>
<ng-form name="addr{{$index}}">
<input type="text"
type="text"
placeholder="请输入6位验证码"
ng-model="item.name3"
required
ng-pattern = "/^[^\u2E80-\u9FFF]{6,16}$/"
name="addr"
ng-class="{ 'hasError' : {{'addr' + $index}}.addr.$dirty && {{'addr' + $index}}.addr.$invalid}"
>
<p ng-show="{{'addr' + $index}}.addr.$dirty && {{'addr' + $index}}.addr.$invalid" class="errorMsg">error message3.</p>
</form>
</td>

</tr>
</tbody>
</table>

<button type="submit">提交</button>

</form>

</body>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<script src="angular.js"></script>
<script src="three.js"></script>
</html>

js
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.jsonList = [
{
name1: 'name1',
name2: 'name2',
name3: 'name3'
},
{
name1: 'name1',
name2: 'name2',
name3: 'name3'
},
{
name1: 'name1',
name2: 'name2',
name3: 'name3'
}
];//原先的数据
$scope.jsonListAdd = [];//添加的数据
$scope.addNum = 0;//添加次数

$scope.regExp = {
mobile:"/^(13|15|17|18|14)[0-9]{9}$/"
}
// 添加
$scope.addRow = function(){
$scope.jsonListAddNull = {
name1: '',
name2: '',
name3: ''
};

$scope.addNum = $scope.addNum + 1;

if($scope.addNum <= 20){
$scope.jsonListAdd.push($scope.jsonListAddNull);
}

};
// 提交
$scope.submit = function(){
console.log($scope.jsonListAdd);
};

});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： angular

相关文章推荐

新的分享

章节导航

angular 1.2.29版本下 动态添加多个表单、 校验全部、 提交 、ng-form方案

angular 1.2.29版本下动态添加多个表单、校验全部、提交、ng-form方案