getting the name of the form tag from an HTML element within a directive

Question

I'm getting the ngModel name, but I also want to get the name of the form to which the element with the "validacion" directive belongs.

I strictly need to get the name of the form to which the HTML element belongs. I can have several forms so I need a dynamic solution. thank you very much

.directive('validacion', function ($timeout,$rootScope,validacionCampos,$compile) {

      return {
          restrict: 'AE',
          require: 'ngModel',

          link: function (scope, element, attrs, ngModel) {
                  if (!ngModel){
                          console.log("no hay modal")
                  return;          
          }

you could try element.closest(form).attr('name'); – Jasper Seinhorst Nov 14 '17 at 15:20 — Jasper Seinhorst, Nov 14 '17 at 15:20

Dane · Answer 1 · 2017-11-14T15:50:55.790

0

The following code should fetch you the value of name attribute of the form to which the validacion element belongs:

link: function (scope, element, attrs, ngModel) {
    console.log(element.closest('form').attr('name'));
  }

EDIT If jQuery is not there in the project, use the parent() function instead, provided that the directive element is the direct child of the <form> tag:

link: function (scope, element, attrs, ngModel) {
    console.log(element.parent().attr('name'));
  }

edited Nov 14 '17 at 15:50

answered Nov 14 '17 at 15:21

Dane

9,242
5
33
56

..closest is a function of jquery? `element.closest is not a function` – unusuario Nov 14 '17 at 15:37
I dont use jquery – unusuario Nov 14 '17 at 15:37
element is a wrapper for using jQuery in Angular. https://docs.angularjs.org/api/ng/function/angular.element – Jasper Seinhorst Nov 14 '17 at 15:38
yes, and if jQuery is not available, angularJS supports jqLite, a subset of jQuery. It seems `closest` is not available in jqLite, so either use jQuery, or use `parent()` instead. See my updated answer – Dane Nov 14 '17 at 15:49

Pille · Answer 2 · 2017-11-14T16:08:14.283

You should require the formCtrl:

require: '^form',

and use this in the link function of your directive:

link: function(scope, element, attrs, formCtrl) {
    console.log(formCtrl);
}

For full details on passing forms into directives, see similar problem being solved at Stackoverflow here: Pass form to directive

EDIT: With AngularJS 1.5.x you have different syntax (being able to skip the link function), just an citation of https://stackoverflow.com/users/1021943/priidu-neemre great answer, (see more with above mentioned link):

return {
  restrict : 'EA',
  require : {
    form : '^'
  },

getting the name of the form tag from an HTML element within a directive

2 Answers2