Pass form to directive that lives outside of the form

Question

I've looked up to 10 pages deep on Google and can't find and answer to this one...so hopefully, there IS one.

I would like to access a form (specifically, it's validity) from outside of the form. I've seen and implemented the use of require: '^form' which works great for when the directive is inside the form.

A few more details...I'm using a bootstrap tabset (ui-bootstrap, to be specific). The idea is to change the tab header text when the form in the tab content panel is valid. Each tab has it's own form.

Any help is appreciated!

Thanks, Wayne

Answer 1

Failing to have your working demo, I assumed some aspects of the issue. If you set a variable on the form and pass that name to the directive via an @Input, you can have access to that form inside the directive.

Typescript

  @Input() formName: ngForm;

HTML

  <form #f="ngForm"></form
....
  <div [formName]="f" .....> 

DEMO