angular 1.2.29版本下动态添加多个表单、校验全部、提交、ng-form方案

来源：互联网发布：国际阿里云实名认证编辑：程序博客网时间：2024/05/20 16:36

html

<!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>

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 = 0;//添加次数    $scope.regExp = {        mobile:"/^(13|15|17|18|14)[0-9]{9}$/"    }    // 添加    $scope.addRow = function(){        $scope.jsonListAddNull = {            name1: '',            name2: '',            name3: ''        };        $scope.addNum = $scope.addNum + 1;        if($scope.addNum <= 20){            $scope.jsonListAdd.push($scope.jsonListAddNull);        }            };    // 提交    $scope.submit = function(){        console.log($scope.jsonListAdd);        };    });

阅读全文

0 0

angular 1.2.29版本下 动态添加多个表单、 校验全部、 提交 、ng-form方案

angular 1.2.29版本下动态添加多个表单、校验全部、提交、ng-form方案