如何设置一个动态的表单字段变脏或角度触摸？ [英] How to set a dynamic form fields to dirty or touched with angular?
问题描述
我有一个动态表单，它是通过从某个API接收到的数据生成的，你可以看到它的例子这里，收到的数据是这样的：
$ scope.users = [
{
名称：'one'，
电子邮件：'one@one.com'
}，
{
名称：''，
电子邮件：' two@two.com'
}，
{
名称：''，
电子邮件：'three@three.com'
}
];
我为这些项目创建一个动态表单，但是我有一个问题，我的验证消息没有显示正确地说，它们与此类似：
< form name =usersForm>
< div ng-form =subFormng-repeat =user in user>
< input name =nametype =textng-model =user.namerequired />
>
名称是必需的
< / p>
< input name =emailtype =emailng-model =user.emailrequired />
< p ng-if =subForm.email。$ invalid&& subForm.email。$ touched>>需要
电子邮件
< / p>
< / div>
< / form>
正如你在plunkr中看到的那样，我使用了两种方法来做到这一点，一种是使用<$
和另一个在表单输入名称中使用插值： form name =usersForm2>ng-form
< div ng-repeat =用户追踪用户$ index>
< input name =name {{$ index}}type =textng-model =user.namerequired />
< p ng-if =usersForm2 ['name'+ $ index]。$ invalid&&& amp; usersForm2 ['name'+ $ index]。$ touched>
名称是必需的
< / p>
< input name =emailtype =emailng-model =user.emailrequired />
< p ng-if =usersForm2 ['email'+ $ index]。$ invalid&&& amp; usersForm2 ['email'+ $ index]。$ touched>需要
电子邮件
< / p>
< / div>
< / form>
如何向用户显示验证消息（当表单被加载或呈现时） p = previewrel =nofollow noreferrer> plunker 或运行下面的代码 I have a dynamic form which is generated by data received from some api, you can see and example of it here, received data is like this: I create a dynamic form for these items, but I have a problem that my validation messages are not shown correctly, they are similar to this one: as you can see in plunkr, I have used two approaches for doing this , one is using How can I show my validation messages to user(when the form is loaded or rendered)? see the updated plunker or run the below code
这篇关于如何设置一个动态的表单字段变脏或角度触摸？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
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 $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>
ng-form and the other using interpolation in form input names:<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>
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>
