Blur for submitting form AngularJS

Question

Hi I have a following html markup

   <h2>First Name Last Name</h2>
   <form>
      <div>
        <input name="fname">
        <input name="lname">
      </div>
    </form>

You click on a header to show the form fields and to edit them (blur hides the fields and shows the header again).

I have a problem because the first and last name are in the same header, so you click on one item to edit two fields.

I am submitting the form on a blur event for the input fields but when I click the last name, because blur is being called in the first name, I cannot edit the second field.

I am using AngularJS which is also presenting a problem because I cannot figure out which element is focused because document.activeElement returns the entire body.

Any help is much appreciated!

Answer 1

Assuming you're using ngBlur directive on the input element, you can mix it with ngFocus to keep elements visible as wanted: <input name="fname" ng-focus="showFields=true;" ng-blur="blurField($event);" >

Using a function for ngBlur, you will have access to the $event object which in turn will expose the elements you need (like target or related). Afterwards, you can trigger form submit depending on your needs.

A demo plunker is HERE.