使用ng-repeat时如何在AngularJs中验证表单

Question

我在angularjs中有表格，我正在验证电子邮件字段。 验证效果很好，但是当我添加另一个电子邮件字段时，验证适用于所有项目。 但是我只希望第一个字段根据需要进行验证。

<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

为了只对ng-repeat呈现的列表中的第一项做某事，您可以简单地使用$first 。

因此，我们可以像这样使用ng-required ，而不是仅仅required它：

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

而且，在所有使用的东西上使用$first ，我们可以摆脱除first之外的电子邮件的验证！

更新的小提琴

编辑 ：从这个问题中我了解到的是，除了第一之外，您不需要验证电子邮件。 如果您担心的是即使第二次输入无效，第二次输入仍然无效，请检查此小提琴 ，该输入有对所有输入电子邮件的单独验证。

Answer 2

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

Answer 3

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

Answer 4

您可以使用ng-if =“ $ first”

尝试这个

 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>