English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Implémentation du directive de validation de mot de passe de formulaire angularjs

Code HTML

<form name="form">
    <input type="password" name="password" ng-model="password" required placeholder="Veuillez saisir le mot de passe">
    <input type="password" name="passwordConfirm" ng-model="passwordConfirm" equal-to="password" placeholder="Veuillez saisir à nouveau le mot de passe">
    <span ng-show="form.passwordConfirm.$error.equalTo">Les deux mots de passe ne correspondent pas</span>
  </form>

js

angular.module("Valid",[])
.directive("equalTo", function () {
  return {
    require: "ngModel",
    link: function (scope, ele, attrs, ctrl) {
      console.log(scope);//Afficher le contexte actuel
      console.log(attrs);//Imprimer la liste des attributs de l'étiquette actuelle
      console.log(ctrl);//Imprimer le ctrl actuel
      var target = attrs["equalTo"];//Obtenir la valeur de la clé de l'attribut personnalisé
      if (target) {//Vérifier si la clé existe
        scope.$watch(target, function () {//Existe une écoute de démarrage qui en écoute la valeur
          ctrl.$validate()//Appeler manuellement la validation à chaque changement
        ) 
        // Obtenir le contrôleur parent FormController du contrôleur de modèle actuel
        var controleurCible = controleur.$$parentForm[target];//Obtenir le contrôleur de modèle spécifique
        console.log(controleurCible)
        ctrl.$validators.equalTo = function (valeurModèle, valeurVue) {//Contenu de validateur personnalisé
          var valeurCible = controleurCible.$viewValue;//Obtenir la valeur d'entrée de password
          return valeurCible == valeurVue;//Est-ce égale à la valeur de passwordConfirm
        }
        ctrl.$formatters.push(function (valeur) {
          console.log("Valeur en cours de formatage des données :", valeur)
          valeur de retour;
        )
        ctrl.$parsers.push(function (valeur) {
          console.log("Valeur en cours de conversion des données :", valeur)
          valeur de retour;
        )
      }
    }
  }
)

Adresse de démonstration :https://tianyouh.github.io/angularPasswordConfirm/

Vous pourriez aussi aimer