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