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即可。

因此，我们可以像required这样使用ng-required，而不仅仅是ng-required="{{$first}}"：

$first

并且，在所有使用的内容中使用<input type="text" id="unit" name="unit" class="form-control form-input" ng-model="item.unit" autocomplete="off" typeahead-min-length="0" uib-typeahead="unit as unit.symbol for unit in units | typeaheadFilter:{'symbol':$viewValue} | orderBy:smartOrder" typeahead-template-url="unit-template.html" />，我们可以摆脱除了第一个以外的电子邮件的验证！

Updated fiddle

编辑：我从问题中理解的是，您不需要先验证电子邮件以外的电子邮件。如果您担心的是，即使第一个无效，它也会显示第二个无效，请检查this fiddle，其中对所有输入的电子邮件都进行了单独验证。

Answer 2

在“必需范围”中删除“＆amp;＆amp; 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>

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

4 个答案: