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

最新推荐文章于 2022-11-09 17:03:26 发布

qq_29069777

最新推荐文章于 2022-11-09 17:03:26 发布

阅读量234

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=hhkbic0aha1j&title=angular+1.2.29%E7%89%88%E6%9C%AC%E4%B8%8B+%E5%8A%A8%E6%80%81%E6%B7%BB%E5%8A%A0%E5%A4%9A%E4%B8%AA%E8%A1%A8%E5%8D%95%E3%80%81+%E6%A0%A1%E9%AA%8C%E5%85%A8%E9%83%A8%E3%80%81+%E6%8F%90%E4%BA%A4+%E3%80%

版权

前端专栏收录该内容

1175 篇文章 1 订阅

订阅专栏

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

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

qq_29069777

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular 1.2.29版本下动态添加多个表单、校验全部、提交、ng-form方案

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title><style> .hasE...
复制链接

扫一扫