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を使用してください。

ので、代わりにちょうどrequiredを有するので、私たちは、このようなng-required利用することができます：

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

そして、使用されているすべてのものに$firstを使用して、我々は最初以外の電子メールの検証を取り除くことができます！

Updated fiddle

EDIT：私は質問から理解することは、あなたが最初以外の電子メールを検証する必要がないことです。最初に無効であった場合でも2秒間無効となる懸念がある場合は、this fiddleにチェックを入れ、入力されたすべての電子メールについて個別に検証します。

Answer 2

削除 "& & myForm.email1。$汚い" "必要なスパン" で

Answer 3

必要なフィールドにn g-repeatループの最初の要素を削除し、新しい選択肢の電子メールを追加することができます。

Answer 4

= "$最初の" NGの場合、あなたは

をを使用することができますあなたは正しい軌道あるこの

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) { 
 

 

 
\t \t \t \t \t var newItemNo2 = $scope.emails.length+1; 
 
\t \t \t \t \t $scope.emails.push({'id':'email'+newItemNo2}); 
 
\t \t \t 
 
\t \t \t 
 
\t \t }; 
 

 
});

.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="{ 
 
\t \t \t \t       'has-error' :isInputInvalid(myForm.email1), 
 
\t \t \t \t       'has-success' : isInputValid(myForm.email1) 
 
\t \t \t \t       \t \t }"> 
 
      <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>