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 ...
随机推荐
- Java核心技术卷一基础知识-第2章-Java程序设计环境-读书笔记
第2章 Java程序设计环境 本章内容: 安装Java开发工具箱 使用集成开发环境 选择开发环境 运行图形化应用程序 使用命令行工具 建立并运行applet本章主要介绍如何安装Java开发工具箱(JD ...
- 机器学习入门07 - 验证 (Validation)
原文链接:https://developers.google.com/machine-learning/crash-course/validation/ 1- 检查直觉 将一个数据集划分为训练集和测试 ...
- PHP拿到接口数据返回的json以及传参-----ajax 跨域请求 ---
以下测试------ <php $ch = curl_init(); $str = '';//此处为接口地址以及传参------- curl_setopt($ch, CURLOPT_URL, $ ...
- NopCommerce用.net core重写ef
最近看了NopCommerce源码,用core学习着写了一个项目,修改的地方记录下.项目地址 NopCommerce框架出来好久了.18年的第一季度 懒加载出来后也会全部移动到.net core.那么 ...
- Ocelot简易教程（七）之配置文件数据库存储插件源码解析
作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9852711.html 上篇文章给大家分享了如何集成我写的一个Ocelot扩展插件把Ocelot的配置存储 ...
- vue 项目实战 (vue全家桶之--- vuex)
老规矩先安装 npm install vuex --save 在看下面内容之前 你应该大概的看了一边vuex官方的文档对vuex有个大概对了解 首先 vuex 是什么? vuex 是属于vue中的什么 ...
- Android--Service之AIDL传递系统基本类型数据
前言 前面讲解了Service的一些基本内容.但是对于绑定服务传递数据,只局限于本地服务,无法使用服务进行跨进程间的交互.如果需要用到跨进程交互的话,需要用到一个新的技术-AIDL,这篇博客就针对AI ...
- MySQL 锁信息和事务
1 锁概念 1.1 什么是锁 锁是数据库系统区别于文件系统的一个关键特性.数据库系统使用锁是为了支持对共享资源进行并发访问,提供数据的完整性和一致性.例如:操作缓冲池中的LRU列表,删除.添加.移动L ...
- HBuilder的安装及用法
一,简介HBuilder 1.1,什么是Hbuilder? HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE.HBuilder的编写用到了Java.C.Web和Ru ...
- MySQL中间件之ProxySQL(15)：ProxySQL代理MySQL组复制
返回ProxySQL系列文章:http://www.cnblogs.com/f-ck-need-u/p/7586194.html 1.ProxySQL+组复制前言 在以前的ProxySQL版本中,要支 ...