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

Implementazione del directive personalizzato per la verifica della password del modulo angularjs

Codice HTML

<form name="form">
    <input type="password" name="password" ng-model="password" required placeholder="Inserisci la password">
    <input type="password" name="passwordConfirm" ng-model="passwordConfirm" equal-to="password" placeholder="Riinserisci la password">
    <span ng-show="form.passwordConfirm.$error.equalTo">Le due password non coincidono</span>
  </form>

js

angular.module("Valid",[])
.directive("equalTo", function () {
  return {
    require: "ngModel",
    link: function (scope, ele, attrs, ctrl) {
      console.log(scope); // Stampa l'ambito corrente
      console.log(attrs); // Stampa l'elenco delle proprietà correnti del tag
      console.log(ctrl); // Stampa il ctrl corrente
      var target = attrs["equalTo"];//ottieni il valore della chiave dell'instruzione personalizzata
      if (target) {//giudicare se la chiave esiste
        scope.$watch(target, function () {//esiste l'avvio della sorveglianza del suo valore
          ctrl.$validate()//chiamata manuale della validazione ogni volta che cambia
        ) 
        // Ottieni il controller padre FormController del controller del modello corrente
        var targetCtrl = ctrl.$$parentForm[target];//ottieni il controller del modello specifico
        console.log(targetCtrl)
        ctrl.$validators.equalTo = function (modelValue, viewVale) {//contenuto del validatore personalizzato
          var targetValue = targetCtrl.$viewValue;//ottieni il valore di input di password
          return targetValue == viewVale;//se uguale al valore di passwordConfirm
        }
        ctrl.$formatters.push(function (value) {
          console.log("Valore di formattazione dei dati in corso:",value)
          valore di ritorno;
        )
        ctrl.$parsers.push(function (value) {
          console.log("Valore di conversione dei dati in corso:",value)
          valore di ritorno;
        )
      }
    }
  }
)

Indirizzo di demo:https://tianyouh.github.io/angularPasswordConfirm/

Ti potrebbe interessare