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

You are the correct track. You just have to change other myForm.email1 to myForm.email{{ $index + 1}} — Thirueswaran Rajagopalan
– Thirueswaran Rajagopalan, Commented Mar 20, 2017 at 8:42

tanmay · Accepted Answer · 2017-03-20 08:52:16Z

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.

edited Mar 20, 2017 at 8:52

answered Mar 20, 2017 at 8:42

tanmay

7,9112 gold badges23 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tanmay Over a year ago

@ThirueswaranRajagopalan yeah, that's better! :)

Sujatha · Accepted Answer · 2017-03-20 08:21:18Z

0

Remove "&& myForm.email1.$dirty" in "Required span"

answered Mar 20, 2017 at 8:21

Sujatha

3024 silver badges14 bronze badges

1 Comment

oded Over a year ago

still not working. I update the fiddle jsFiddle

jp rathore · Accepted Answer · 2017-03-20 08:47:37Z

0

You can remove first element out of ng-repeat loop as it is required field and add then new choice email.

answered Mar 20, 2017 at 8:47

jp rathore

3510 bronze badges

Comments

Amal · Accepted Answer · 2017-03-20 09:24:04Z

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>

Collectives™ on Stack Overflow

How to validate form in AngularJs while using ng-repeat

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related