How to validate form in AngularJs while using ng-repeat

Question

I have form in angularjs, i was validate an email field. The validation works great, but when i add another email field the validation works on all the items. But I only want the first field to be validate as required.

<form novalidate name="myForm">
  <button class="btn btn-info btn-sm" ng-click="addNewChoice('email')">
    <i class="fa fa-at"></i> Add Email
  </button>
  <br>
  <div class="form-group row">
    <div data-ng-repeat="email in emails">
      <div class="col-md-4 col-sm-12" ng-class="{
                                       'has-error'   :isInputInvalid(myForm.email1),
                                       'has-success' : isInputValid(myForm.email1)
                                        }">
        <label for="email{{ $index + 1}}">Email {{ $index + 1}}</label>
        <input type="email" class="form-control" name="email{{ $index + 1}}" ng-model="formModel.emails[$index + 1]" id="email{{ $index + 1}}" placeholder="Enter email" required>
        <span class="help-block" ng-show="myForm.email1.$error.required && myForm.email1.$dirty">Required</span>
        <span class="help-block" ng-show="myForm.email1.$error.email">Email not valid!</span>
      </div>
    </div>

  </div>
</form>

jsFiddle

Answer 1

In order to do something for only first item in a list rendered by ng-repeat , you can simply make use of $first .

So, instead of having just required , we can utilize ng-required like this:

ng-required="{{$first}}"

And, using $first at all the things used, we can get rid of validation for emails other than first!

Updated fiddle

EDIT : What I understood from the question is that you don't need validations for emails other than first. If your concern was that it says invalid for second even when first is invalid, check this fiddle which has individual validation for all emails entered.

Answer 2

在“必需的跨度”中删除“ && myForm.email1。$ dirty”

Answer 3

您可以从n g-repeat循环中删除第一个元素，因为它是必填字段，然后添加新的选择电子邮件。

Answer 4

You can use ng-if="$first"

Try this

 var myApp = angular.module('appMy', []); myApp.controller('myCtrl', function($scope) { console.log("hguy"); $scope.formModel = {}; $scope.emails = [{ id: 'email1' }]; $scope.isInputValid = function(input) { return input.$dirty && input.$valid; } $scope.isInputInvalid = function(input) { return input.$dirty && input.$invalid; } $scope.addNewChoice = function(val) { var newItemNo2 = $scope.emails.length+1; $scope.emails.push({'id':'email'+newItemNo2}); }; }); 

 .help-block { color: #b34848; } .has-error label { color: #a94442; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <div class="container" ng-app="appMy"> <div ng-controller="myCtrl"> <form novalidate name="myForm"> <button class="btn btn-info btn-sm" ng-click="addNewChoice()"> <i class="fa fa-at"></i> Add Email </button> <br> <div class="form-group row"> <div data-ng-repeat="email in emails"> <div class="col-md-4 col-sm-12" ng-class="{ 'has-error' :isInputInvalid(myForm.email1), 'has-success' : isInputValid(myForm.email1) }"> <label for="email{{ $index + 1}}">Email {{ $index + 1}}</label> <input type="email" class="form-control" name="email{{ $index + 1}}" ng-model="formModel.emails[$index + 1]" id="email{{ $index + 1}}" placeholder="Enter email" required> <span ng-if="$first" class="help-block" ng-show="myForm.email1.$touched && myForm.email1.$invalid">Required</span> <span class="help-block" ng-show="myForm.email{{ $index + 1}}.$error.email">Email not valid!</span> </div> </div> </div> </form> </div> </div>