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 ...
随机推荐
- ubuntu 16.04 下安装NVDIＡ的库（CUDA+CUDNN）
立志学习神经网络的同学,为了让它能够跑快一点,估计英伟达的GPU是要折腾一番的． 首先看一下什么是CUDA ? CUDA(Compute Unified Device Architecture),是显 ...
- 两步验证杀手锏：Java 接入 Google 身份验证器实战
两步验证 大家应该对两步验证都熟悉吧?如苹果有自带的两步验证策略,防止用户账号密码被盗而锁定手机进行敲诈,这种例子屡见不鲜,所以苹果都建议大家开启两步验证的. Google 的身份验证器一般也是用于登 ...
- MQ（1）---消息队列概念和使用场景
消息队列概念和使用场景 声明:本文转自:MQ入门总结(一)消息队列概念和使用场景 写的很好,都不用自己在整理了,非常感谢该作者的用心. 一.什么是消息队列 消息即是信息的载体.为了让消息发送者和消息接 ...
- Redis主从同步原理-PSYNC【转】
Reids复制数据主要有2种场景: 1. 从服务器从来第一次和当前主服务器连接,即初次复制 2. 从服务器断线后重新和之前连接的主服务器恢复连接,即断线后重复制 对于初次复制来说使用SYNC命令进 ...
- C++版-剑指offer 面试题6：重建二叉树(Leetcode105. Construct Binary Tree from Preorder and Inorder Traversal) 解题报告
剑指offer 重建二叉树 提交网址: http://www.nowcoder.com/practice/8a19cbe657394eeaac2f6ea9b0f6fcf6?tpId=13&tq ...
- Python快速学习08：模块的操作
前言 系列文章:[传送门] 天气干燥,我就上火,流鼻血.希望身子好起来. 正文 函数和对象都是为了更好的组织已经有的程序,以方便重复利用. 模块(module)也是为了同样的目的.模块可以包含可执行代 ...
- leetcode — minimum-path-sum
/** * Source : https://oj.leetcode.com/problems/minimum-path-sum/ * * * Given a m x n grid filled wi ...
- nginx多tomcat负载均衡
目的 先说说我要干什么,如题:使用nginx实现多个tomcat服务器的负载均衡. nginx 大名鼎鼎,相信很多人都听过,以前感觉很厉害,用了之后发现真的很厉害.nginx可以做以下几件事: 反向代 ...
- 【原创】驱动加载之OpenSCManager
SC_HANDLE WINAPI OpenSCManager( _In_opt_ LPCTSTR lpMachineName, _In_opt_ LPCTSTR lpDatabaseName, _In ...
- java 学习基础知识点拾遗 导航页
每种编程语言的知识点都是很多很杂的,java也是如此 相信很多人学习的过程中都是深一脚浅一脚,最基础的东西可能有些也不是非常确定 整理了最基本的一些知识点,可以说是java入门的-1层级别的,作为自己 ...