AngularJs Validation CSS Fehler

Question

Ich habe einen unteren Code, der 3 Textfelder generiert. Nun das Problem ist, wenn ich auf eines der Textfelder klicke, werden alle 3 Textfelder fokussiert, obwohl sie unterschiedliche Werte für Name und Label haben.

<div class="col-md-12" data-ng-repeat="dohPolicy in [1,2,3]"> 

    <div class="col-md-2" style="padding:0px; margin-right:1%;"> 
     <p style="font-size:11px;">P no {{dohPolicy}} </p> 
    </div> 
    <div class="form-group col-md-6" 
      data-ng-class='{ "has-focus": dohForm.dohPolicy.hasFocus, 
          "has-success": dohForm.dohPolicy.$valid, 
          "has-error": dohForm.dohPolicy.$invalid && (dohForm.$submitted || dohForm.dohPolicy.$touched), 
          "is-empty": !dohForm.dohPolicy.$viewValue }' 
          style="right: 150px; bottom: 40px; padding: 0; width:20%;"> 
     <label for="dohPolicy"></label> 
     <input type="text" name="dohPolicy" 
        data-ng-model="dohPolicy" required readonly 
        data-ng-blur='dohForm.dohPolicy.hasFocus=false' 
        data-ng-focus='dohForm.dohPolicy.hasFocus=true'> 
     <p data-ng-show="dohForm.dohPolicy.$error.required && (dohForm.dohPolicy.$touched || submitted)" 
       class="error-block"> 
      P Number(s) 
     </p> 
    </div> 
</div> 

Obwohl ich versuchte, String-Arrays zu verwenden, aber nicht in der Lage, das Problem zu lösen. Ich möchte, wenn ich auf ein bestimmtes Textfeld nur dieses Textfeld klicken Fokus und markiert.

Jede Hilfe wird geschätzt!

Dank

Answer 1

<input type="text" name="dohPolicy" 
           data-ng-model="dohPolicy" required readonly 
           data-ng-blur='dohForm.dohPolicy.hasFocus=false' 
           data-ng-focus='dohForm.dohPolicy.hasFocus=true' 
           > 

Hier werden alle Texteingabe erzeugt, dynamisch share the same modeldohPolicy.

So, sie all get dirty at the same time and emit the blur & focus event.

Sie müssen den eindeutigen Namen des Modells

Answer 2

Als @Riyaj vorgeschlagen alle Eingangssteueranteil das gleiche Modell & gleichen Namen, hinzufügen, damit alle

zugleich schmutzig

Namen für die Kontrolle muss innerhalb eines Formulars eindeutig sein.

Sie müssen für jedes Eingabesteuerelement einen anderen Namen angeben.

<form role="form" novalidate name="vm.form"> 
    <div class="col-md-12" data-ng-repeat="dohPolicy in [1,2,3]"> 
     <div class="col-md-2" style="padding:0px; margin-right:1%;"> 
      <p style="font-size:11px;">P no {{dohPolicy}} </p> 
     </div> 
     <div class="form-group col-md-6" 
     data-ng-class='{ "has-focus": dohForm.dohPolicy[{{dohPolicy}}].hasFocus, 
       "has-success": dohForm.dohPolicy[{{dohPolicy}}].$valid, 
       "has-error": dohForm.dohPolicy[{{dohPolicy}}].$invalid && (dohForm.$submitted || dohForm.dohPolicy.$touched), 
       "is-empty": !dohForm.dohPolicy[{{dohPolicy}}].$viewValue }' 
       style="right: 150px; bottom: 40px; padding: 0; width:20%;"> 
      <label for="dohPolicy"> 
      </label> 
     <input 
      type="text" name="dohPolicy[{{dohPolicy}}]" 
      data-ng-model="dohPolicy" required 
      data-ng-blur='dohForm.dohPolicy[{{dohPolicy}}].hasFocus=false' 
      data-ng-focus='dohForm.dohPolicy[{{dohPolicy}}].hasFocus=true' 
      class="form-control" 
      > 
      <p 
      data-ng-show="dohForm.dohPolicy[{{dohPolicy}}].$error.required && (dohForm.dohPolicy[{{dohPolicy}}].$touched || submitted)" 
      class="error-block">P Number(s)</p> 
     </div> 
    </div> 
</form> 

hoffe, dies wird Ihnen ..

Answer 3

Verwenden $ Index in Ihrem Namen Attribut helfen und

<div class="col-md-12" data-ng-repeat="dohPolicy in [1,2,3]"> 

    <div class="col-md-2" style="padding:0px; margin-right:1%;"> 
     <p style="font-size:11px;">P no {{dohPolicy}} </p> 
    </div> 
    <div class="form-group col-md-6" 
    data-ng-class='{ "has-focus": dohForm.dohPolicy.hasFocus, 
     "has-success": dohForm.dohPolicy.$valid, 
     "has-error": dohForm.dohPolicy.$invalid && (dohForm.$submitted || dohForm.dohPolicy.$touched), 
     "is-empty": !dohForm.dohPolicy.$viewValue }' 
     style="right: 150px; bottom: 40px; padding: 0; width:20%;"> 
     <label for="dohPolicy"> 
     </label> 
    <input 
     type="text" name="dohPolicy_{{$index}}" 
     data-ng-model="dohPolicy" required readonly 
     data-ng-blur='dohForm.dohPolicy.hasFocus=false' 
     data-ng-focus='dohForm.dohPolicy.hasFocus=true' 
     > 
     <p 
     data-ng-show="dohForm['dohPolicy_' + $index].$error.required && (dohForm.dohPolicy.$touched || submitted)" 
     class="error-block">P Number(s)</p> 
    </div> 

</div>