Angular, XEditable and validation on a SharePoint page

Question

I am rewriting a single page application that will be hosted "inside a SharePoint web part" as part of a rework/redesign project on a pre-existing SharePoint solution and as a part of this I am switching from a server side controls + Update Panel Hell based solution to an AngularJS based one.

One of the view I am redesigning is basically a table (with some added complications like dynamic columns and such that aren't really the focus here) with inline edit support. Looking at the available technologies, I have considered using the Angularjs port of the X-Editable library.

After some initial test, I have identified a possible solution using what X-Editable calls "Form based Editing": basically, a group of controls can be grouped in a "Form" and that form cam be controlled by an single set of Edit/Cancel/Save buttons. By putting that in a ng-repeater, I could easily achieve the desired results - inline editing for my table rows.

Sadly, there seems to be two mayor problems with this approach:

• X-Editable requires the control to be wrapped in a "form". That is conflicting with the common SharePoint page structure that often wraps all the page content in a form too.
• X-Editable seems to require that the "Save" button on a form is an actual type="submit" button. This agains conflicts with SharePoint own page level form tag: if I use a type="button" button, X-Editable won't recognize the save event, if I use the submit one, SharePoint will try to submit the main form. Trying to use a return false; trick on the button onclick handler won't work either - X-Editable won't recognize the button click that way.

I am currently searching for a solution to this problem that won't require editing the SharePoint master page / page layout (I can't control those). Documentation on the matter from the X-Editable site seems still lacking this specific use-case... probably because no one had to work with an unwanted outer form tag on the page he didn't need in the first place...

Answer 1

After some digging, I have found a solution to the problem I though would be useful to share here (I didn't found any blog post or such tackling this problem, but I guess it is something someone else may need one day).

First step is avoiding the need for a form TAG. Looking at the documentation I found out some reference stating that X-Editable supports the <ng-form> directive too as a replacement for the form tag, and that can be easily place on any element, such as the table rows in my example.

The second step was a little more complex to find out, but nothing really difficult to do afterward. Basically, I simply looked at the library source code and try to find out why a submit button was needed in the first place. In the end, I found out that the library simply uses a JQuery based filter to find the submit button for the target form and then attaches its own handler to the button click event. All what was left was to somehow copy that handler. Lucky - all it does is calling a function called $submit on the e-form object, so it was pretty simple to replicate too.

In the end the full code looked something like this:

<tr ng-form="myForm" editable-form ng-repeater=".......">
   <td>
      <span editable-text="....." e-form="myForm" e-name="myEditableField">
         {{....}}
      </span>
   </td>
   <td>
      <button type="button" ng-show="myForm.$visible" ng-disabled="myForm.$waiting"
           ng-click="myForm.$submit()">
        Save
      </button>
</tr>

(Note: other buttons/ controls have been removed for sake of semplicity)

Here myForm.$submit() submits the current row form. This is required for validation to be trigger (base on my tests myForm.$save only saves the data but does not trigger actual validation)