對多個字段的AngularJS驗證

我需要一個用於驗證動態添加字段的示例。這是我的頁面。對多個字段的AngularJS驗證

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

來源

2016-08-01 B G Nithin Malathesh

喜的朋友，我需要一個例子來驗證動態添加字段。這是我的頁面。 –

什麼問題？ – developer033

我想爲動態創建的輸入字段添加驗證。像添加 - 刪除多個地址 –

下面是答案：

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

來源

2016-08-04 12:25:58

您可以將fonction添加到您的控制器：

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

，那麼你只需要修改

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

來源

2016-08-01 14:00:07 jibe

嗨，吉貝，我可以得到一個演示頁面的例子？對此表示敬意。 –

對多個字段的AngularJS驗證

回答

相關問題