Angularjs form vaidation

Question

Ich habe eine Liste von Kontakten auf meiner Seite, jedes wird in einem <input> Feld angezeigt (sie sind alle in einem <form> Element. Wenn ich auf ein Feld klicke und es bearbeite, möchte ich eine Validierung haben - ., wenn das Feld nicht leer ist zum Beispiel, ich will dieses Feld gebe ein rotes BG und/oder eine Nachricht unter genau diesem Feld angezeigt So habe ich versucht, dies:

<form name="contactsForm" ng-submit="update()" novalidate> 
    <tr class="row"> 
     <td colspan="2"> 
      <input type="text" class="form-control" placeholder="Search for contact" ng-model="filter.userSearch"/> 
      <button class="btn btn-primary btn-sm btn-delete" ng-click="clearSearchField()"></button> 
     </td> 
     <td> 
      <button class="btn btn-warning" ng-click="toggleNewContact()">Add User</button> 
      <button type="submit" class="btn btn-danger">Update</button> 
     </td> 

    </tr> 
    <tr class="row" ng-if="addNewContact" ng-repeat="new in newContacts"> 

     <td><input type="text" class="col-md-12 form-control" ng-model="new.en_name"></td> 
     <td><input type="text" class="col-md-12 form-control" ng-model="new.email"></td> 
     <td> 
      <button ng-click="addMore()" class="btn btn-sm btn-success glyphicon glyphicon-plus"></button> 
      <button ng-click="addLess(new)" class="btn btn-sm btn-danger glyphicon glyphicon-minus"></button> 
     </td> 
    </tr> 
    <tr class="row" ng-repeat="contact in contactList | filter:filter.userSearch track by $index"> 
     <td class="form-group" ng-class="{ 'has-error' : contactsForm.en_name.$invalid && !contactsForm.en_name.$pristine }"> 
      <input type="text" class="col-md-12 form-control" ng-model="contact.en_name" name="en_name" required> 
      <p ng-show="contactsForm.en_name.$invalid && !contactsForm.en_name.$pristine" class="help-block">Name in English is required.</p> 
     </td> 
     <td> 
      <input type="text" class="col-md-12 form-control" ng-model="contact.email" name="{{contact.email}}" required> 
     </td> 
    </tr> 
</form> 

, die nicht funktionierte, ich didn sehe keine Nachricht Ich habe es auch versucht:

<input type="text" class="col-md-12 form-control" ng-model="contact.en_name" name="{{contact.en_name}}" required> 

Aber ich wusste nicht wie Verbinden Sie diesen Teil name="{{contact.en_name}}" mit diesem <p ng-show="contactsForm.en_name.$invalid && !contactsForm.en_name.$pristine".

Ich habe auch versucht $index als Name verwendet:

<td class="form-group" ng-class="{ 'has-error' : contactsForm.$index.$invalid && !contactsForm.$index.$pristine }"> 
    <input type="text" class="col-md-12 form-control" ng-model="contact.en_name" name="{{$index}}" required> 
    <p ng-show="contactsForm.$index.$invalid && !contactsForm.$index.$pristine" class="help-block">Name in English is required.</p> 
</td> 

Aber das hat nicht funktioniert auch - ich keine Fehlermeldung angezeigt hat.

Was mache ich falsch und wie kann ich es funktionieren lassen?

Answer 1

Das Problem ist Ihre alle Eingabefelder innerhalb ng-repeat mit dem gleichen Namen Attribut (so alle wurden auf gleiche name in Formularobjekt), so müssen Sie irgendwie jedes Namensattribut eindeutig sein. Sie könnten $index verwenden, um es einzigartig zu machen.

Markup

<td class="form-group" ng-class="{ 'has-error' : contactsForm['en_name'+$index].$invalid && !contactsForm['en_name'+$index].$pristine }"> 
    <input type="text" class="col-md-12 form-control" 
    ng-model="contact.en_name" ng-attr-name="{{'en_name'+$index}}" required> 
    <p ng-show="contactsForm['en_name'+$index].$invalid && !contactsForm['en_name'+$index].$pristine" 
    class="help-block"> 
     Name in English is required. 
    </p> 
</td>