<!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. [Swift]在Swift项目中创建桥接头文件，Swift文件和Objective-C文件相互调用

    创建一个Swift项目[demo],以下内容Swift文件和Objective-C文件相互调用都是在Swift项目中. 一.Swift文件调用Objective-C文件 新建文件夹[SupportFi ...

  2. ubuntu 16.04 安装matlab的替代工具Octave及使用指南

    为什么要安装Octave? 它是什么? GNU Octave是自由软件基金会(Free Software Foundation)支持的遵循GPL协议(GNU General Public Licens ...

  3. Hadoop面试题

    1.把数据仓库从传统关系数据库转到hadoop有什么优势? 原关系存储方式昂贵 空间有限 hadoop支持结构化(例如 RDBMS),非结构化(例如 images,PDF,docs )和半结构化(例如 ...

  4. js数组之sort排序的用法

    sort排序 转载自:https://blog.csdn.net/idomyway/article/details/80544509 js中用方法sort()为数组排序.sort()方法有一个可选参数 ...

  5. Git基本命令 -- 历史

    历史. 收先需要了解一下git log命令, 使用git的帮助看看: git help log: 执行该命令后, 我的win10弹出来一个html页面, 里面是git log命令的帮助: 首先看看gi ...

  6. javascript数组的属性、方法和清空-最全！！！(必看)

    今天经理要我从新看一遍js,当我再看<精通js和jquery>这本书时,发现关于数组的这章节讲的很少,于是想自己总结一下数组的常用方法. 定义数组: var arr = new Array ...

  7. mysql 开发基础系列19 触发器

    触发器是与表有关的数据库对象,触发器只能是针对创建的永久表,而不能是临时表. 1.1 创建触发器 -- 语法: CREATE TRIGGER trigger_name trigger_time tri ...

  8. 在vue中使用Autoprefixed

    为了使我们的项目兼容各种浏览器,我们可能会在开发中写大量的前缀.即使有了IDE为我们提供了便捷的方式.但是仍然需要我们去花时间和精力.而这样会浪费我们很多的时间.为了在开发中提升团队的开发效率,并且同 ...

  9. 基于openssl搭建https服务器

    1. 搭建web环境 我这里使用源码编译安装方式安装httpd.详情可以参加我的一篇博客http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_linux_1 ...

  10. Map<String, Object>转Object,Object转 Map<String, Object>

    Map转Object import com.alibaba.fastjson.JSON; Map<String, Object> boneAgeOrderMap=boneAgeOrderS ...