javascript - How to get the parent form of a from a custom form control directive in angular? - Stack Overflow

admin管理员组

文章数量:1291721

Usually, validating forms in angular is done like this:

<form name="form">
  <input name="fruit" ng-model="ctrl.fruit" required>
  <span class="error" ng-show="form.fruit.$error.required">
    Fruit is required.
  </span>
</form>

The thing is that I have multiple forms some of which have similar fields, so I want to refactor some of this logic into a directive:

<form name="form1">
   <fruit-input></fruit-input>
</form>

<form name="form2">
   <fruit-input></fruit-input>
</form>

The problem is that the logic to display or hide the field error message requires the template to have access to the form to evaluate the condition form.fruit.$error.required. But my fruitInput directive needs to work regardless of the form where it's inserted.

Is there a way for the directive to identify its parent form so I can use it in its (isolated) scope to show/hide the error message?

Edit (due to a response questioning the usefulness of the question): Evidently the example is simplified.

In reality, a field on the form may have many of the following: a label, a help text, tooltip on hover, links to documentation, the control itself, all the different validation messages for the different validation conditions. One of such controls can easily be 20 lines of code and be used in 4~5 different places. So it's worth refactoring it.

Usually, validating forms in angular is done like this:

<form name="form">
  <input name="fruit" ng-model="ctrl.fruit" required>
  <span class="error" ng-show="form.fruit.$error.required">
    Fruit is required.
  </span>
</form>

The thing is that I have multiple forms some of which have similar fields, so I want to refactor some of this logic into a directive:

<form name="form1">
   <fruit-input></fruit-input>
</form>

<form name="form2">
   <fruit-input></fruit-input>
</form>

The problem is that the logic to display or hide the field error message requires the template to have access to the form to evaluate the condition form.fruit.$error.required. But my fruitInput directive needs to work regardless of the form where it's inserted.

Is there a way for the directive to identify its parent form so I can use it in its (isolated) scope to show/hide the error message?

Edit (due to a response questioning the usefulness of the question): Evidently the example is simplified.

In reality, a field on the form may have many of the following: a label, a help text, tooltip on hover, links to documentation, the control itself, all the different validation messages for the different validation conditions. One of such controls can easily be 20 lines of code and be used in 4~5 different places. So it's worth refactoring it.

• javascript
• angularjs

Share Follow edited Apr 26, 2014 at 2:21 Juan Enrique Muñoz Zolotoochin asked Apr 26, 2014 at 1:58 Juan Enrique Muñoz ZolotoochinJuan Enrique Muñoz Zolotoochin 3,58933 gold badges3535 silver badges4040 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

Try this directive:

app.directive("fruitInput",function(){
  return {
    restrict:"E",
    template:'<input name="fruit" ng-model="ctrl.fruit" required> ' +
     ' <span class="error" ng-show="form.fruit.$error.required"> ' + //form here is the parent form resolved dynamically and saved in the scope as a property
     '  Fruit is required. ' +
     ' </span>',
     scope:{},
     require:"^form", //inject parent form as the forth parameter to the link function
     link:function (scope,element,attrs,form){
       scope.form = form; //save parent form
     }
  }
})

DEMO

本文标签： javascriptHow to get the parent form of a from a custom form control directive in angularStack Overflow