CODEWITHSUNDEEP
javascriptangularjsvalidationangularjs-ng-repeat
oded
oded

Reputation: 179

How to validate form in AngularJs while using ng-repeat

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

Upvotes: 0

Views: 133

Answers (4)

Amal
Amal

Reputation: 3426

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>

Upvotes: 0

tanmay
tanmay

Reputation: 7911

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.

Upvotes: 1

jp rathore
jp rathore

Reputation: 35

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

Upvotes: 0

Sujatha
Sujatha

Reputation: 302

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

Upvotes: 0

Related Questions