How to set a dynamic form fields to dirty or touch

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.com'
      },
      {
        name: '',
        email: 'two@two.com'
      },
      {
        name: '',
        email: 'three@three.com'
      }
    ];

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

标签： angularjs forms validation dynamicform

1条回答

不美不萌又怎样

2楼-- · 2019-06-06 05:09

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

0人赞添加讨论(0) 举报

How to set a dynamic form fields to dirty or touch

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间