在Angular實際開發中，我們遇到查詢資料，用ng-repeat循環在前台頁面展示，而ng-repeat中的内容又需要獨立操作，且需對每個ng-repeat中的區域中的輸入框進行修改儲存，且每個ng-repeat區域都需要校驗，此時我們發現校驗失效了。
遇到此問題時，當時第一反應是有兩處原因，一處是由于ng-repeat中的内容是動态編譯出來的，可能是作用域問題導緻；另一處是由于我們的校驗是通過form來實作的，動态form失效了。
是以，特做了如下小執行個體進行了驗證，發現問題出在動态Form的校驗沒生效。
首先，讓我們來看下動态編譯執行個體：
formValidationTest.html
<html>
<head>
<title>表單驗證</title>
<!--
<link href="lib/bootstrap-gh-pages/assets/bootstrap.css" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css" />
-->
<link rel="stylesheet" href="lib/bootstrap-3.0.0/css/bootstrap.css" target="_blank" rel="external nofollow" >
<style>
#css_form input.ng-invalid.ng-dirty {
background-color: #FFC0CB;
}
#css_form input.ng-valid.ng-dirty {
background-color: #78FA89;
}
</style>
</head>
<body ng-controller="myCtrl">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">表單驗證</div>
</div>
<div class="panel-body">
<div class="row">
<div inner-content>
</div>
</div>
</div>
</div>
<script type='text/javascript' src='lib/angular/angular.js'></script>
<script type='text/javascript' src='lib/bootstrap-gh-pages/ui-bootstrap-tpls-0.10.0.js'></script>
<script type='text/javascript' src='app.js'></script>
<script type='text/javascript' src='directive.js'></script>
</body>
</html>
subPage.html
<form id="css_form" class="form-horizontal" novalidate name="myform" role="form">
<div class="form-group">
<label for="inputAccount" class="col-md-2 control-label">賬号：</label>
<div class="col-md-2">
<!--輸入框 -->
<input type="number" ng-model="user.account" min="3" max="6" name="myAccount" required class="form-control" id="inputAccount" placeholder="請輸入3-6的整數"/>
</div>
<!-- 隐藏塊，顯示驗證資訊-->
<div class="alert alert-danger well-sm" ng-show="myform.myAccount.$error.required">賬号不能為空！</div>
<div class="alert alert-danger well-sm" ng-show="myform.myAccount.$error.min || myform.myAccount.$error.max">輸入值必須在3-6之間!</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-md-2 control-label">郵箱：</label>
<div class="col-md-2">
<!--輸入框 -->
<input type="email" ng-model="user.email" name="myEmail" required class="form-control" id="inputEmail" placeholder="請輸入郵箱位址"/>
</div>
<!-- 隐藏塊，顯示驗證資訊-->
<div class="alert alert-danger well-sm" ng-show="myform.myEmail.$error.required">郵箱不能為空！</div>
<div class="alert alert-danger well-sm" ng-show="myform.myEmail.$error.email">郵箱格式不正确!</div>
</div>
<!--按鈕組-->
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button class="btn btn-default" ng-disabled="!myform.$valid">送出</button>
<button class="btn btn-default" ng-click="reset(user)">重置</button>
</div>
</div>
</form>
app.js
var myApp=angular.module('myModule', ['ui.bootstrap','directives']);
myApp.controller('myCtrl',function($scope){
$scope.user ={id:1, account:undefined, email:undefined};
$scope.reset=function(user){ //表單重置
user.account = '';
user.email = '';
};
});
angular.element(document).ready(function() {
angular.bootstrap(document,['myModule']);
}); directive.js
'use strict';
/* Directives */
var directivesModule = angular.module( "directives", [] );
directivesModule.directive("innerContent", ['$http','$compile', function($http, $compile) {
return {
restrict: "A",
scope: false,
link: function(scope, element, attrs) {
var initTpl = function (){
$http.get('subPage.html').success(function(response) {
element.html(response);
$compile(element, false, 0)(scope);
});
};
initTpl();
},
replace: true
};
}]); 在FireFox運作效果：
校驗生效，說明動态編譯對校驗是不影響的。修改subPage.html如下：
<form id="css_form" class="form-horizontal" novalidate name="myform_{{user.id}}" role="form">
<div class="form-group">
<label for="inputAccount" class="col-md-2 control-label">賬号：</label>
<div class="col-md-2">
<!--輸入框 -->
<input type="number" ng-model="user.account" min="3" max="6" name="myAccount" required class="form-control" id="inputAccount" placeholder="請輸入3-6的整數"/>
</div>
<!-- 隐藏塊，顯示驗證資訊-->
<div class="alert alert-danger well-sm" ng-show="myform_{{user.id}}.myAccount.$error.required">賬号不能為空！</div>
<div class="alert alert-danger well-sm" ng-show="myform_{{user.id}}.myAccount.$error.min || myform_{{user.id}}.myAccount.$error.max">輸入值必須在3-6之間!</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-md-2 control-label">郵箱：</label>
<div class="col-md-2">
<!--輸入框 -->
<input type="email" ng-model="user.email" name="myEmail" required class="form-control" id="inputEmail" placeholder="請輸入郵箱位址"/>
</div>
<!-- 隐藏塊，顯示驗證資訊-->
<div class="alert alert-danger well-sm" ng-show="myform_{{user.id}}.myEmail.$error.required">郵箱不能為空！</div>
<div class="alert alert-danger well-sm" ng-show="myform_{{user.id}}.myEmail.$error.email">郵箱格式不正确!</div>
</div>
<!--按鈕組-->
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button class="btn btn-default" ng-disabled="!myform_{{user.id}}.$valid">送出</button>
<button class="btn btn-default" ng-click="reset(user)">重置</button>
</div>
</div>
</form>
app.js
var myApp=angular.module('myModule', ['ui.bootstrap','directives']);
myApp.controller('myCtrl',function($scope){
$scope.user ={id:1, account:undefined, email:'[email protected]'};
$scope.reset=function(user){ //表單重置
user.account = '';
user.email = '';
};
});
angular.element(document).ready(function() {
angular.bootstrap(document,['myModule']);
}); 在FireFox中運作效果：
發現校驗失效了，是以确定是動态form原因造成的。且郵箱輸入框能正常顯示模型資料，說明雙向綁定也是OK的。