我有一个动态形式,该表格是由从某些API收到的数据生成的,您可以在这里看到并示例,收到的数据是这样的:
$scope.users = [
{
name: 'one',
email: 'one@one.com'
},
{
name: '',
email: 'two@two.com'
},
{
name: '',
email: 'three@three.com'
}
];
我为这些项目创建动态形式,但是我有一个问题,即我的验证消息未正确显示,它们与此相似:
<form name="usersForm">
<div ng-form="subForm" ng-repeat="user in users">
<input name="name" type="text" ng-model="user.name" required />
<p ng-if="subForm.name.$invalid && subForm.name.$touched">
name is required
</p>
<input name="email" type="email" ng-model="user.email" required />
<p ng-if="subForm.email.$invalid && subForm.email.$touched">
email is required
</p>
</div>
</form>
您在plunkr中看到的,我使用了两种方法来执行此操作,一种是使用ng-form
,另一种是使用形式输入名称的插值:
<form name="usersForm2">
<div ng-repeat="user in users track by $index">
<input name="name{{$index}}" type="text" ng-model="user.name" required />
<p ng-if="usersForm2['name' + $index].$invalid && usersForm2['name' + $index].$touched">
name is required
</p>
<input name="email" type="email" ng-model="user.email" required />
<p ng-if="usersForm2['email' + $index].$invalid && usersForm2['email' + $index].$touched">
email is required
</p>
</div>
</form>
如何向用户显示我的验证消息(加载或渲染表格时)?
请参阅更新的plunker或运行以下代码
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.users = [
{
name: 'one',
email: 'one@one.com'
},
{
name: '',
email: 'two@two.com'
},
{
name: '',
email: 'three@three.com'
}
];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script src="https://code.angularjs.org/1.5.4/angular.js"></script>
<!-- By setting the version to snapshot (available for all modules), you can test with the latest master version -->
<!--<script src="https://code.angularjs.org/snapshot/angular.js"></script>-->
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div>
First approach using ng-form
</div>
<form name="usersForm">
<div ng-form="subForm" ng-repeat="user in users">
<input name="name" type="text" ng-model="user.name" required />
<p ng-if="subForm.name.$invalid && subForm.name.$error">
name is required
</p>
<input name="email" type="email" ng-model="user.email" required />
<p ng-if="subForm.email.$invalid && subForm.email.$error">
email is required
</p>
</div>
</form>
<div>
second approach using interpolation
</div>
<form name="usersForm2">
<div ng-repeat="user in users track by $index">
<input name="name{{$index}}" type="text" ng-model="user.name" required />
<p ng-if="usersForm2['name' + $index].$invalid && usersForm2['name' + $index].$error">
name is required
</p>
<input name="email" type="email" ng-model="user.email" required />
<p ng-if="usersForm2['email' + $index].$invalid && usersForm2['email' + $index].$error">
email is required
</p>
</div>
</form>
</body>
</html>