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 = 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);    
    };
    
});

 

posted @ 2017-03-09 11:43  Cynthia娆墨旧染  阅读(2143)  评论(1)  编辑  收藏  举报