forms - solo - Cómo agregar atributos de validación en una directiva angularjs

validar formulario angular 4

Question

Intento escribir una directiva angular que agrega atributos de validación a la etiqueta, pero parece que no funciona. Aquí está mi demo. Observará que "Es válido" sigue siendo cierto si elimina el texto en el segundo cuadro de entrada, pero pasa a falso si elimina el texto en el primer cuadro de entrada.

http://plnkr.co/edit/Rr81dGOd2Zvio1cLYW8D?p=preview

Aquí está mi directiva:

angular.module(''demo'', [])
.directive(''metaValidate'', function () {
    return {
        restrict: ''A'',
        link: function (scope, element, attrs) {
            element.attr("required", true);
        }
    };
});

Supongo que me estoy perdiendo algo simple.

Answer 1

Todas las reglas para la validación del formulario se leen en la fase de compilación del formulario, por lo que después de realizar cambios en un nodo secundario, debe volver a compilar la directiva de form (se trata de una directiva personalizada en AngularJS). Pero hágalo solo una vez, evite bucles infinitos (la función de ''enlace'' de su directiva se volverá a llamar después de la compilación del formulario).

angular.module(''demo'', [])
.directive(''metaValidate'', function ($compile) {
    return {
        restrict: ''A'',
        link: function (scope,element, attrs) {
          if (!element.attr(''required'')){
            element.attr("required", true);
            $compile(element[0].form)(scope);
          }
        }
    };
});

Trabajo plunker: http://plnkr.co/edit/AB6extu46W4gFIHk0hIl?p=preview

Answer 2

Sé que esta es una pregunta bastante antigua, pero por lo que vale, los documentos angulares describen ng-required que toma un valor booleano. Esto resolvió un problema similar que estaba teniendo.

http://docs.angularjs.org/api/ng/directive/input

Answer 3

Tenga cuidado con los bucles infinitos y recompila, aquí hay una mejor solución: Agregar directivas desde la directiva en AngularJS

angular.module(''app'')
  .directive(''commonThings'', function ($compile) {
    return {
      restrict: ''A'',
      terminal: true, //this setting is important to stop loop
      priority: 1000, //this setting is important to make sure it executes before other directives
      compile: function compile(element, attrs) {
        element.attr(''tooltip'', ''{{dt()}}'');
        element.attr(''tooltip-placement'', ''bottom'');
        element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop
        element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html

        return {
          pre: function preLink(scope, iElement, iAttrs, controller) {  },
          post: function postLink(scope, iElement, iAttrs, controller) {  
            $compile(iElement)(scope);
          }
        };
      }
    };
  });

Working plunker está disponible en: http://plnkr.co/edit/Q13bUt?p=preview