如何设置一个动态的表单字段变脏或角度触摸？

本文介绍了如何设置一个动态的表单字段变脏或角度触摸？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一个动态表单，它是通过从某个API接收到的数据生成的，你可以看到它的例子这里，收到的数据是这样的：

$ scope.users = [ { 名称：'one'，电子邮件：'one@one'}， {名称：''，电子邮件：' two@two'}， {名称：''，电子邮件：'three@three'} ];

我为这些项目创建一个动态表单，但是我有一个问题，我的验证消息没有显示正确地说，它们与此类似：

< 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中看到的那样，我使用了两种方法来做到这一点，一种是使用<$

ng-form 和另一个在表单输入名称中使用插值： form name =usersForm2> < 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 或运行下面的代码

var app = angular.module（'plunker'，[]）; app.controller（'MainCtrl'，function（$ scope）{$ scope.users = [{name：'one'，email： 'one@one'}，{name：''，email：'two@two'}，{name：''，email：'three@three'}];}）; <！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 =stylesheet/> < script src =code.angularjs/1.5.4/angular.js>< / script> <！ - 通过将版本设置为快照（适用于所有模块），您可以使用最新的主版本进行测试 - > <！ - < script src =code.angularjs/snapshot/angular.js>< / script> - > < script src =app.js>< / script> < /头> < body ng-controller =MainCtrl> < DIV>使用ng-form的第一种方法< / div> < form name =usersForm> < div ng-form =subFormng-repeat =用户中的用户> < input name =nametype =textng-model =user.namerequired /> < p ng-if =subForm.name。$ invalid&& subForm.name。$ error>名称是必需的< / p> < input name =emailtype =emailng-model =user.emailrequired /> < p ng-if =subForm.email。$ invalid&& subForm.email。$ error>电子邮件是必需的< / p> < / DIV> < /形式> < DIV>使用插值的第二种方法< / div> < form name =usersForm2> < div ng-repeat =用户追踪$ index> < input name =name {{$ index}}type =textng-model =user.namerequired /> < p ng-if =usersForm2 ['name'+ $ index]。$ invalid&&& amp; usersForm2 ['name'+ $ index]。$ error>名称是必需的< / p> < input name =emailtype =emailng-model =user.emailrequired /> < p ng-if =usersForm2 ['email'+ $ index]。$ invalid&&& amp; usersForm2 ['email'+ $ index]。$ error>电子邮件是必需的< / p> < / DIV> < /形式> < / body>< / html>

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:

$scope.users = [ { name: 'one', email: 'one@one' }, { name: '', email: 'two@two' }, { name: '', email: 'three@three' } ];

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:

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

as you can see in plunkr, I have used two approaches for doing this , one is using 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>

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

var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.users = [ { name: 'one', email: 'one@one' }, { name: '', email: 'two@two' }, { name: '', email: 'three@three' } ]; });

<!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="code.angularjs/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="code.angularjs/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>