how to make angular-xeditable edit state always enabled

Question

I am using angular-xeditable to edit elements within a form. I would like to have all the elements in "editable" mode at all times, e.g. no "edit" button needs to be pushed before the user starts editing.

I have been trying to use the $show() in my controller to enable the elements in the form, however it seems like the elements goes into viewing state again for example when using "onaftersave" when trying to save the values etc.

How do I do in order to always be in edit mode where the user never needs to enable editing in order to start editing the values?

Answer 1

Possibly try adding shown=true in your html:

<form editable-form shown="true">

Answer 2

I had this same problem. Even when trying to $show() the form again at the end of my onaftersave function it still wouldn't work. I suspect the visibility is being hidden after the onaftersave function runs but I didn't actually check if that's the case. Here's how I got around it:

$scope.$watch('yourFormName.$visible', function() {
    $scope.yourFormName.$show();
});

Now whenever the form visibility changes to hidden, it will just show it again regardless of when it changed.

Answer 3

If your form is already open, and you just want to keep it open after submitting, you can do this:

<form editable-form name="MyForm" onbeforesave="saveMyData()" onaftersave="keepFormOpen()">

and the function keepFormOpen() would look something like this:

$scope.keepFormOpen = function() {
    return "fake error message";
}

What this does is essentially gives the form a fake error message after you have already saved your data. This fake error message will interrupt the forms closing process, but since it was called after you already saved your data, it won't affect the previous submit.

Answer 4

To really keep open the form we can do the following:

<form editable-form name="MyForm" onbeforesave="saveMyData()" onhide="MyForm.$show()">