: gültig CSS zeigt auch wenn $ gültig: false

Question

so hier ist mein Code, ich eine benutzerdefinierte Richtlinie verwenden, um festzustellen, ob die beiden Passwörter übereinstimmen, hier ist meine html

<!-- confirm password --> 
    <div class="row"> 
     <div class="col-xs-10 col-centered"> 
      <div class="col-md-5 col-xs-12 inputLabels"> 
       <b>Confirm Password:</b> 
      </div> 

      <div class="col-md-5 col-xs-12"> 
       <input type="password" name="confirmPassword" ng-model="boardingData.confirmPassword" class="form-control" required compare-to="boardingData.password"> 
      </div> 
     </div> 
    </div> 

und die Richtlinie zu bestimmen, ob die Passwörter passen

app.directive('compareTo', function() { 
return { 
    require: "ngModel", 
    scope: { 
     otherModelValue: "=compareTo" 
    }, 
    link: function(scope, element, attributes, ngModel) { 

     ngModel.$validators.compareTo = function(modelValue) { 
      return modelValue == scope.otherModelValue; 
     }; 

     scope.$watch("otherModelValue", function() { 
      ngModel.$validate(); 
     }); 
    } 
}; 

});

schließlich die CSS

input:valid {box-shadow: 0 0 3px rgb(97, 240, 59);} 

Answer 1

Der Grund ist, weil: valid eine pseudo-Klasse spezifisch ist, wenn der Inhalt eines Eingangs entspricht das [type] Attribut. Wie Sie auf https://developer.mozilla.org/en-US/docs/Web/CSS/:valid sehen können. Was Sie stattdessen wollen, ist die Klasse ng-valid wie hier zu sehen https://docs.angularjs.org/api/ng/directive/form.

Lassen Sie mich wissen, wenn Sie weitere Hilfe benötigen.