angular 1.2.29版本下 动态添加多个表单、 校验全部、 提交 、ng-form方案
<!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>
<!-- <p>dirty: <span ng-bind="{{'tel' + $index}}.tel.$dirty"></span> </p>
<p>invalid: <span ng-bind="{{'tel' + $index}}.tel.$invalid"></span></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="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.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 = ;//添加次数
$scope.regExp = {
mobile:"/^(13|15|17|18|14)[0-9]{9}$/"
}
// 添加
$scope.addRow = function(){
$scope.jsonListAddNull = {
name1: '',
name2: '',
name3: ''
};
$scope.addNum = $scope.addNum + ;
if($scope.addNum <= ){
$scope.jsonListAdd.push($scope.jsonListAddNull);
}
};
// 提交
$scope.submit = function(){
console.log($scope.jsonListAdd);
};
});
angular 1.2.29版本下 动态添加多个表单、 校验全部、 提交 、ng-form方案的更多相关文章
- IE低版本下实现html5的placeholder(表单提示)功能
placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 <inpu ...
- v-if案例解析（element-ui form-item 结合 v-if 动态生成rule规则\表单元素，表单无法验证问题剖析 ）
fire 读在最前面: 1.此文章衔接Vue 虚拟Dom 及 部分生命周期初探,相关整体知识点请先阅读后再继续本文阅读 问:当v-if为true时,会重新渲染相关dom节点吗? <child v ...
- IE下object元素遮挡div表单
目前遇到这样的一个问题: 我用ActiveX插件做了一个C#的播放器,要将这个插件放到web浏览器中,然后可以通过前台页面来控制视频的播放,暂停还有回放,这个时候发现object的onclick事件无 ...
- Express下使用formidable实现POST表单上传文件并保存
Express下使用formidable实现POST表单上传文件并保存 在上一篇文章中使用formidable实现了上传文件,但没将它保存下来. 一开始,我也以为是只得到了文件的相关信息,需要用fs. ...
- Element-ui中为上传组件添加表单校验
vue所依赖的Element的UI库在使用其中的upload组件时,可能很大几率会遇到这个题,需要给upload组件添加表单校验 大家这里直接看代码就可以 <el-form-item class ...
- struts之动态方法调用改变表单action属性
一.动态方法调用(DMI:Dynamic Method Invocation) ⒈struts2中同样提供了这个包含多个逻辑业处理的Action,这样就可以在一个Action中进行多个业务逻辑处理 ...
- MVC下HtmlHelper自带BeginForm表单提交与异步Ajax请求
假如有一个数据表格UserInfo: public class UserInfo { public int Id { get; set; } public string Name { get; set ...
- JavaWeb -- Struts1 动态bean, 动态校验， 动态生成javascript 表单校验
1. 动态formbean. 表单 JSP: <%@ page language="java" import="java.util.*" pageEnco ...
- 点击含下拉菜单的列表/表单按钮：通过JS创建虚拟按钮并点击
${JsCode} | Get Element Attribute | XPATH=//table[@class='mnubar']//tr//td//span[text()='${MenuArr[0 ...
随机推荐
- 吴恩达机器学习笔记19-过拟合的问题（The Problem of Overfitting）
到现在为止,我们已经学习了几种不同的学习算法,包括线性回归和逻辑回归,它们能够有效地解决许多问题,但是当将它们应用到某些特定的机器学习应用时,会遇到过拟合(over-fitting)的问题,可能会导致 ...
- Key-Value 数据库简介
1.Aerospike 官方网站:https://www.aerospike.com/ Aerospike是一个以分布式为核心基础,可基于行随机存取内存中索引.数据或SSD存储中数据的数据库. Aer ...
- [Swift]JSON字符串与字典(Dictionary)、数组(Array)之间的相互转换
1.JSON字符串与字典(Dictionary)之间的相互转换 import Foundation //JSON字符串转换为字典(Dictionary) func getDictionaryFromJ ...
- onload事件与ready事件的区别，原生js与jquery的区别
onload事件与ready事件分别是原生js与jquery的入口函数 原生js入口函数写法: window.onload=function(){ } jquery入口函数写法: $(document ...
- asp.net core 2.0发布到IIS流程及报错解决方案
我这是个新装的服务器,没有安装任何软件. 一.发布流程 1.安装AspNetCoreModule托管模块,同时会自动安装..net core runtime DotNetCore.2.0.8-Wi ...
- Ocelot简易教程（二）之快速开始1
Ocelot简易教程目录 Ocelot简易教程(一)之Ocelot是什么 Ocelot简易教程(二)之快速开始1 Ocelot简易教程(二)之快速开始2 Ocelot简易教程(三)之主要特性及路由详解 ...
- 使用GOOGLE COLAB训练深度学习模型
使用 谷歌提供了免费的K80的GPU用于训练深度学习的模型.而且最赞的是以notebook的形式提供,完全可以做到开箱即用.你可以从Google driver处打开.或者这里 默认创建的是没有GPU的 ...
- mysql 开发进阶篇系列 5 SQL 优化(表优化)
一. 使用sql提示 sql 提示(sql hint)是优化数据库的一个重要手段, 是在sql语句中加入一些人为的提示来达到优化操作的目的. 1.1 use index 在查询语句中表名的后面,添加u ...
- 《HelloGitHub月刊》第 02 期
<HelloGithub>第02期 兴趣是最好的老师,而<HelloGitHub> 就是帮你找到兴趣! 因为我比较熟悉python语言,所以月刊中python语言的项目居多,个 ...
- 使用 AcceptTcpClientAsync 进行 异步 操作
转自:https://gist.github.com/jamesmanning/2622054 using System; using System.Collections.Generic; usin ...