如何在使用ng-repeat時驗證AngularJs中的表單

我有angularjs中的表單，我驗證了一個電子郵件字段。驗證工作很好，但是當我添加另一個電子郵件字段時，驗證適用於所有項目。但我只想要第一個字段根據需要進行驗證。如何在使用ng-repeat時驗證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

來源

2017-03-20 oded

你是正確的軌道上。您只需將其他* myForm.email1 *更改爲* myForm.email {{$ index + 1}} * –

爲了做一些只有第一項由ng-repeat，可以渲染列表只需使用$first即可。

所以，而不是僅僅required，我們可以利用ng-required這樣的：

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

而且，使用的話，我們可以擺脫驗證比第一其它電子郵件的東西用$first！

Updated fiddle

編輯：我從這個問題了解什麼是你不需要的電子郵件驗證比第一分。如果您擔心的是，即使第一次無效，第二秒也是無效的，請檢查this fiddle，該號碼對所有輸入的電子郵件進行單獨驗證。

來源

2017-03-20 08:42:13 tanmay

做了進一步的調整http://jsfiddle.net/y302r7tL/29/ :) –

@ThirueswaranRajagopalan啊，這是更好！ :) – tanmay

，這是更好的。謝謝！ – oded

刪除「& & myForm.email1。$髒」，在「所需跨度」

來源

2017-03-20 08:21:18 Sujatha

仍然無法正常工作。我更新了小提琴[的jsfiddle（http://jsfiddle.net/odedtaizi/y302r7tL/25/） – oded

您可以刪除n中的第一個元素g-repeat循環，因爲它是必填字段，然後添加新的選擇電子郵件。

來源

2017-03-20 08:47:37

可以使用NG-IF = 「$第一」

試試這個

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>

來源

2017-03-20 08:55:28 Amal

如何在使用ng-repeat時驗證AngularJs中的表單

回答

相關問題