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

"en">

    "UTF-8">
    

"myApp" ng-controller="myCtrl">
    "addRow()">添加
    
"userForm" novalidate  ng-submit="userForm.$valid?submit():''">
        "item in jsonList">
                    "item in jsonListAdd">
                    

            

                 

                    
字段一
                    
字段二
                    
字段三
                
            
            

                

                        "text" readonly ng-model="item.name1">
                    
                    

                        "text" readonly ng-model="item.name2">
                    
                    

                        "text" readonly ng-model="item.name3">
                    
                
                

                        "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}"
                            >
                            
"{{'tel'   $index}}.tel.$dirty && {{'tel'   $index}}.tel.$invalid" class="errorMsg">error message1.
                            
                        
                    
                    

                        "email{{$index}}">
                            "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}"
                            >
                            
"{{'email'   $index}}.email.$dirty && {{'email'   $index}}.email.$invalid" class="errorMsg">error message2.
                        
                    
                    

                        "addr{{$index}}">
                            "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}"
                            >
                            
"{{'addr'   $index}}.addr.$dirty && {{'addr'   $index}}.addr.$invalid" class="errorMsg">error message3.
                        
                    
                    
                
            
        

        "submit">提交

    


    


    
    
     
    

 

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

 

更多专业前端知识，请上 【猿2048】www.mk2048.com