AngularJS+angular-xeditable表单添加editable-form属性及Thymeleaf兼容方案咨询

Alright, let's tackle your two questions one by one—here's what you need to know:

Absolutely! The editable-form attribute is a core directive provided by angular-xeditable, purpose-built to manage groups of editable elements within a form. It enables key functionality like:

• Triggering bulk save/cancel actions for all editable fields in the form
• Binding callback functions (like your onaftersave and oncancel) to handle post-save or post-cancel logic
• Centralizing control over the form's editable state

Your example code:

<form editable-form name="tableform" onaftersave="afterSave()" oncancel="cancel()"> </form>

is actually the standard, recommended way to use this directive. As long as you’ve properly included the angular-xeditable module in your AngularJS app (e.g., angular.module('myApp', ['xeditable'])), this will work exactly as intended.

Since you’re using spring.thymeleaf.mode=LEGACYHTML5, Thymeleaf still enforces basic HTML attribute validity rules, and editable-form is flagged as a non-standard custom attribute. Here are three reliable fixes:

• Use Thymeleaf's th:attr syntax to inject the attribute
  Thymeleaf’s th:attr lets you explicitly define custom attributes without triggering validity checks. Rewrite your form tag like this:

  <form th:attr="editable-form='', name='tableform', onaftersave='afterSave()', oncancel='cancel()'">
  </form>
  

  When Thymeleaf renders the template, it will output the exact attributes you need, including editable-form.

• Prefix the attribute with data- (AngularJS supports this)
  AngularJS automatically recognizes directives prefixed with data-, so you can safely rename the attribute to data-editable-form. Thymeleaf treats data-* attributes as valid HTML5 custom attributes, so it won’t throw an error. Your code becomes:

  <form data-editable-form name="tableform" onaftersave="afterSave()" oncancel="cancel()">
  </form>
  

  AngularJS will still map data-editable-form to the editableForm directive in angular-xeditable, so all functionality stays intact.

• Upgrade to Thymeleaf 3.x (if using an older version)
  Thymeleaf 3.x introduced far better support for custom attributes, even in stricter modes. If you’re on Thymeleaf 2.x, upgrading to 3.x will let you use the original editable-form attribute directly—no extra work needed, and Thymeleaf won’t flag it as invalid.

内容的提问来源于stack exchange，提问作者Pradeep Sanjaya