<!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方案的更多相关文章

  1. IE低版本下实现html5的placeholder(表单提示)功能

    placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 <inpu ...

  2. v-if案例解析（element-ui form-item 结合 v-if 动态生成rule规则\表单元素，表单无法验证问题剖析 ）

    fire 读在最前面: 1.此文章衔接Vue 虚拟Dom 及 部分生命周期初探,相关整体知识点请先阅读后再继续本文阅读 问:当v-if为true时,会重新渲染相关dom节点吗? <child v ...

  3. IE下object元素遮挡div表单

    目前遇到这样的一个问题: 我用ActiveX插件做了一个C#的播放器,要将这个插件放到web浏览器中,然后可以通过前台页面来控制视频的播放,暂停还有回放,这个时候发现object的onclick事件无 ...

  4. Express下使用formidable实现POST表单上传文件并保存

    Express下使用formidable实现POST表单上传文件并保存 在上一篇文章中使用formidable实现了上传文件,但没将它保存下来. 一开始,我也以为是只得到了文件的相关信息,需要用fs. ...

  5. Element-ui中为上传组件添加表单校验

    vue所依赖的Element的UI库在使用其中的upload组件时,可能很大几率会遇到这个题,需要给upload组件添加表单校验 大家这里直接看代码就可以 <el-form-item class ...

  6. struts之动态方法调用改变表单action属性

      一.动态方法调用(DMI:Dynamic Method Invocation) ⒈struts2中同样提供了这个包含多个逻辑业处理的Action,这样就可以在一个Action中进行多个业务逻辑处理 ...

  7. MVC下HtmlHelper自带BeginForm表单提交与异步Ajax请求

    假如有一个数据表格UserInfo: public class UserInfo { public int Id { get; set; } public string Name { get; set ...

  8. JavaWeb -- Struts1 动态bean, 动态校验， 动态生成javascript 表单校验

    1. 动态formbean. 表单 JSP: <%@ page language="java" import="java.util.*" pageEnco ...

  9. 点击含下拉菜单的列表/表单按钮：通过JS创建虚拟按钮并点击

    ${JsCode} | Get Element Attribute | XPATH=//table[@class='mnubar']//tr//td//span[text()='${MenuArr[0 ...

随机推荐

  1. MySQL InnoDB 行记录格式（ROW_FORMAT）

    MySQL InnoDB 行记录格式(ROW_FORMAT) 一.行记录格式的分类和介绍 在早期的InnoDB版本中,由于文件格式只有一种,因此不需要为此文件格式命名.随着InnoDB引擎的发展,开发 ...

  2. 实用：Git 中的一些常见错误

    无论是数据科学家.算法工程师还是普通开发人员,在每个团队协作开发任务中,Git 都是必不可少的版本控制工具,因此掌握它的基本操作十分有必要.但即便是教程满天飞的今天,开发人员在使用 Git 时也还是会 ...

  3. Java核心技术卷一基础知识-第10章-部署应用程序和applet-读书笔记

    第10章 部署应用程序和applet 本章内容: * JAR文件 * Java Web Start * applet * 应用程序首选项存储 10.1 JAR文件 一个JAR文件既可以包含类文件,也可 ...

  4. JavaScript中+操作符的特殊性

    在JavaScript中+操作符有两个作用: (1)加法运算 (2)字符串连接 在使用+操作符进行运算时,当+操作符两边都是数值类型的时候,进行加法运算; 当+操作符两边有任意一边是字符串,则进行字符 ...

  5. HBase之HRegionServer启动（含与HMaster交互）

    在我的博文<HBase——HMaster启动之一>.<HBase——HMaster启动之二>中已经详细介绍过HMaster在启动过程中调用的各种方法.下面,单就HRegionS ...

  6. requests 处理异常错误 requests.exceptions.ConnectionError HTTPSConnectionPool [Errno 10060]

    使用python requests模块调用vmallarg.vmall.com接口API时报如下错误: requests.exceptions.ConnectionError: HTTPSConnec ...

  7. oracle 锁表 and 解锁

    查询锁定表的相关 SELECT l.session_id sid, s.serial#, l.locked_mode,l.oracle_username, l.os_user_name,s.machi ...

  8. Android中设置控件的背景颜色的方式整理

    版权声明:本文为博主原创文章,未经博主允许不得转载. 前言 在Android开发中,经常需要设置控件的背景颜色或者图片的src颜色. 效果图 代码分析 根据使用的方法不同,划分为 setBackgro ...

  9. spark最新源码下载并导入到开发环境下助推高质量代码(Scala IDEA for Eclipse和IntelliJ IDEA皆适用）（以spark2.2.0源码包为例）（图文详解）

    不多说,直接上干货! 前言   其实啊,无论你是初学者还是具备了有一定spark编程经验,都需要对spark源码足够重视起来. 本人,肺腑之己见,想要成为大数据的大牛和顶尖专家,多结合源码和操练编程. ...

  10. 【Objective-C】内存管理

    涉及三大知识点:引用计数器,属性参数,自动释放池 一.引用计数器(程序编译时Xcode可以自动给你的代码添加内存释放代码,如果编写手动释放代码Xcode会报错) 1.关闭ARC(xcode 4.x之后 ...