Bootstrap ve AngularJS ile form doğrulaması

Question

AngularJS doğrulama modelini Bootstrap form doğrulama ekranı ile birleştirmeye çalışıyorum.

• Kullanıcı boş bir form yüklerse, formun hemen hata mesajını görüntülemesini istemiyorum. Kullanıcının formla etkileşime girmesini beklemek istiyorum.
• Bir kullanıcı formu doldurulmayan alanları doldurduysa, bir hata mesajı görüntülemek istiyorum.
• Bir kullanıcı alana yazmaya başladığında, hata iletilerinin hemen gösterilmesini istiyorum.

yüzden myForm.<fieldName>.$touched yanı sıra myForm.$submitted, myForm.<fieldName>.$dirty kontrol etmeliyiz. Ancak, çok az sayıda varyasyonla çoğaltılan kodlar yapar.

Bu sorunu gidermek için bir yönerge oluşturmaya çalıştım ancak bu karmaşıklığı doğru bir şekilde sarmalamanın doğru yolunu bulamıyorum.

HTML:

<div class="form-group required" ng-class="{ 'has-error': myForm.firstname.$invalid && (myForm.firstname.$dirty || myForm.$submitted || myForm.firstname.$touched) }"> 
    <label for="firstname" class="control-label" translate>Profile.FirstName</label> 
    <input type="text" class="form-control" id="firstname" name="firstname" required ng-model="vm.profile.firstName"/> 
    <p class="help-block" ng-if="myForm.firstname.$error.required" translate>Forms.Default.Required</p> 
</div> 

Bütün ng-class niteliğini alıp daha özlü bir şey tarafından değiştirmek istiyorum. yönerge nedenle bu denenmiş gitmek yolu gibi görünüyordu:

(function(){ 
    'use strict'; 
    angular.module('app') 
    .directive('hasError', [function(){ 
     return { 
      restrict: 'A', 
      scope: { 
       form: '=bsForm', 
       control: '=bsControl' 
      }, 
      link: function(scope, element){ 
       scope.$watch('form', function(){ 
        var isInvalid = scope.control.$invalid && scope.control.$dirty; 
        element.toggleClass('has-error', isInvalid); 
       }); 

      } 
     }; 
    }]); 
})(); 

Kullanımı:

<div class="form-group required" has-error bs-form="myForm" bs-control="myForm.firstname"> 
... 
</div> 

ancak form özellikleri değişince ferahlatıcı değildi bu.

Neyi eksik?

Answer 1

Böyle bir şey yaptım. Benim çözümüm biraz farklı bir yaklaşım benimsedi, ancak burada yararlı olabilir (bu noktayı Github numaralı telefondan görüntüleyebilirsiniz).

Esasen, yaptığım şey tüm form verilerimi tek bir nesne içine sarmaktır ve bu nesneyi <form> özniteliğine atarım. O nesneyi izlerim ve her değiştiğinde, ng-dirty ve ng-invalid sınıflarıyla tüm elemanları seçerim (bu seçici istediğiniz gibi değiştirilebilir). Daha sonra bu öğelerin her birine döngü ve her biri için iletileri güncelleştirin.

(function() { 
    "use strict" 
    angular.module('app') 
    .directive('formValidator', function() { 
     return { 
     require: '^form', 
     scope: { 
      formData: '=', 
      validateAll: '=' 
     }, 
     link: function(scope, element, attrs, ctrls) { 
      window.frm = ctrls; 
      var selector = '.ng-dirty.ng-invalid'; 

      function validate() { 
      $(".formValidator-input-validation-error-message").remove(); 
      element.find(selector).each(function(index, el) { 
       $el = $(el); 
       var messages = []; 
       var classes = $el.attr('class').match(/[\d\w-_]+/g); 
       for (var i in classes) { 
       var lastIndex = classes[i].lastIndexOf('-invalid-'); 
       if (lastIndex != -1) { 
        var validationMessageAttr = "data-" + classes[i].substr(lastIndex + 9) + "-validation-message"; 
        var msg = $el.attr(validationMessageAttr); 
        if (!msg) { 
        msg = element.attr(validationMessageAttr); 
        if (!msg) { 
         msg = "Invalid!"; 
        } 
        } 
        messages.push("<div class='validator'>" + msg + "</div>"); 
       } 
       } 
       $(el).after("<div style='position:absolute;' class='formValidator-input-validation-error-message'>" + messages.join() + "</div>"); 
      }); 
      } 
      scope.$watch(function() { 
      return scope.formData; 
      }, function() { 
      validate(); 
      }, true); 
      scope.$watch('validateAll', function(newValue, oldValue) { 
      selector = !!newValue ? '.ng-invalid' : '.ng-dirty.ng-invalid'; 
      validate(); 
      }); 
     } 
     }; 
    }) 
})(); 

Answer 2

Yani ... tam olarak benim kullanımı için düzgün bir direktif çalışması başardı:

İşte kod.

Daha iyi bir yol varsa, lütfen beni yanlış anlatın.

(function(){ 
    'use strict'; 
    angular.module('app') 
    .directive('hasError', [function(){ 
     return { 
      restrict: 'A', 
      scope: { 
       form: '=bsForm', 
       control: '=bsControl' 
      }, 
      link: function(scope, element){ 
       scope.$watchGroup(['control.$invalid', 'control.$dirty', 'control.$touched', 'form.$submitted'], function(){ 
        var isInvalid = scope.control.$invalid && (scope.control.$dirty || scope.form.$submitted || scope.control.$touched); 
        element.toggleClass('has-error', isInvalid); 
       }); 

      } 
     }; 
    }]); 
})();