Question

我需要一个关于动态添加字段验证的示例。这是我的页面。

   <!DOCTYPE html>
    <html>
    <head>
    <meta charset="ISO-8859-1">
    <link rel="stylesheet"
        href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
      </script>
    <script
        src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
      </script>
    <script
        src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js">
      </script>
    <title>Add Remove in AngularJS</title>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.deleted = [];
        $scope.inputs = [];
        $scope.addRow = function(){
            $scope.inputs.push({name:'', age:''});
            };
        $scope.removeRow = function(index, input){
         //   alert(index);
         //   alert(input);
            $scope.deleted.push(input);
                $scope.inputs.splice(index,1);
                };

    });
    </script>
    </head>

    <body style="background-color: gray; margin-top: 10px; ">
        <center>
            <div class="row" ng-app="myApp" ng-controller="myCtrl">
                <div class="col-md-6">
                    <div class="panel panel-flat">
                        <div class="panel-header">
                            <h4>
                                Person Address
                                <button ng-click="addRow()">Add</button>
                            </h4>
                        </div>
                        <div class="panel-body">
                            <form name="form" class="form-horizontal">
                                <div ng-repeat="input in inputs">
                                    <div class="form-group" ng-class="{'has-error' : form.name.$invalid}">
                                        <label class="col-md-2 control-label">Name</label>
                                        <div class="col-md-10">
                                            <input type="text" ng-model="input.name" name="name[$index]" ng-maxlength="45" ng-minlength="3"
                                                class="form-control" ng-pattern="/^[a-zA-Z]+$/" required />
                                            <span class="help-block" ng-show="form.name[$index].$error.pattern">Alphabet only</span>
                                            <span class="help-block" ng-show="form.name[$index].$error.minlength">Too Short</span>
                                            <span class="help-block" ng-show="form.name[$index].$error.maxlength">Too Long</span>
                                            <span class="help-block" ng-show="form.name[$index].$error.required">required</span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-2 control-label">Age</label>
                                        <div class="col-md-10">
                                            <input type="text" ng-model="input.age" name="age"
                                                class="form-control" ng-pattern="/^[0-9]{0,3}$/" /><br>
                                            <span ng-show="form.age.$invalid && form.age.$error.pattern">Number
                                                length should be 3</span>
                                        </div>
                                    </div>

                                    <button ng-click="removeRow($index, input)">Remove</button>
                                    <hr>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- inputs :{{inputs}}<br>deleted : {{deleted}} -->
            </div>
        </center>
    </body>

    </html>

Answer 1

您可以为您的控制器添加一个功能：

app.controller('myCtrl', function($scope) {
 //...
 $scope.validationFn = function () {
   //do you validation here
 };

然后你只需要修改

<form name="form" class="form-horizontal" ng-submit="validationFn()">

Answer 2

以下是答案：

 <div class="panel-body"><form name="form" class="form-horizontal">
 <div ng-repeat="input in inputs"><ng-form name="sfIn"><div class="form-group" >
                                <label class="col-md-2 control-label">Name</label>
                                <div class="col-md-10">
                                    <input type="text" ng-model="input.name" name="name"  ng-maxlength="45" ng-minlength="3"
                                        class="form-control" ng-pattern="/^[a-zA-Z]+$/" required />
                                    <span
                                    class="help-block" ng-show="sfIn.name.$error.pattern">Alphabet only</span>
                                    <span 
                                    class="help-block" ng-show="sfIn.name.$error.minlength">Too Short</span>
                                    <span 
                                    class="help-block" ng-show="sfIn.name.$error.maxlength">Too Long</span>
                                    <span 
                                    class="help-block" ng-show="sfIn.name.$touched.required || sfIn.name.$error.required ||
                                    sfIn.name.$dirty.required">required</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Age</label>
                                <div class="col-md-10">
                                    <input type="text" ng-model="input.age" name="age"
                                        class="form-control" ng-pattern="/^[0-9]{0,3}$/" /><br>
                                    <span 
                                    ng-show="sfIn.age.$error.pattern">Number
                                        length should be 3</span>
                                </div>
                            </div>

                            <button 
                            ng-click="removeRow($index, input)">Remove</button>
                            </ng-form>
                            <hr>
                        </div>
                    </form>
                </div>

AngularJS多个字段的验证

2 个答案: