SmartForm

<!-- 1. Smart Core — toast · loader · modal (optional but recommended) -->
<script src="smart-core.js"></script>

<!-- 2. Input components (load whichever you use) -->
<script type="module" src="input.js"></script>
<script type="module" src="smart_search_input.js"></script>
<script type="module" src="rich_text_input.js"></script>

<!-- 3. SmartTable (optional — needed only for refresh-target) -->
<script type="module" src="smart-table.js"></script>

<!-- 4. SmartForm -->
<script type="module" src="smart-form.js"></script>

<!-- Global singletons — once in base.html -->
<smart-toast position="bottom-right" max="5"></smart-toast>
<smart-modal></smart-modal>
<smart-loader type="overlay"></smart-loader>

<smart-form
  api-url="/api/users/"
  method="POST"
  response-map='{"successPath":"status","messagePath":"message","errorsPath":"errors"}'
>
  <smart-input type="text"  name="username" label="Username" required></smart-input>
  <smart-input type="email" name="email"    label="Email"    required></smart-input>
  <button type="submit">Save</button>
</smart-form>

<smart-form
  mode="native"
  action="/submit/"
  method="POST"
  client-validate
>
  <!-- Django CSRF -->
  

  <smart-input type="text" name="title" label="Title" required></smart-input>
  <button type="submit">Submit</button>
</smart-form>

// mode="auto" — resolved at submit time
// api-url present  → AJAX mode (intercepts submit, uses fetch)
// api-url absent   → native mode (browser submits to action URL)

<smart-form api-url="/api/save/">  <!-- auto → AJAX -->
<smart-form action="/save/">          <!-- auto → native -->

// Content-Type: application/json
{
  "full_name": "Alice Smith",
  "email":     "alice@example.com",
  "password":  "••••••••",
  "role":      "editor"
}

<!-- Template -->
<smart-form
  api-url="<your-article-creation-api-url>"
  method="POST"
  client-validate
  response-map='{"successPath":"status","messagePath":"detail","errorsPath":"errors"}'
  refresh-target="articlesTable"
>
  <smart-input type="text"     name="title"    label="Title"    required></smart-input>
  <smart-input type="datepicker" name="pub_date" label="Publish Date"></smart-input>
  <smart-quill name="body" label="Content" required></smart-quill>
  <button type="submit">Publish</button>
</smart-form>

# DRF View — views.py
class ArticleCreateView(generics.CreateAPIView):
    serializer_class = ArticleSerializer
    permission_classes = [IsAuthenticated]

    def create(self, request, *args, **kwargs):
        serializer = self.get_serializer(data=request.data)
        if serializer.is_valid():
            serializer.save(author=request.user)
            return Response({
                "status":  "success",
                "message": "Article published.",
                "data":    serializer.data,
            })
        return Response({
            "status":  "error",
            "errors":  serializer.errors,   # mapped onto individual fields
            "message": "Please fix the errors below.",
        }, status=400)

// Server returns 400 with field errors:
{
  "status":  "error",
  "errors":  { "title": "This field is required.", "email": "Already taken." },
  "message": "Please fix the errors below."
}

// SmartForm behaviour:
//   → Calls field.showError("This field is required.") on [name="title"]
//   → Calls field.showError("Already taken.")          on [name="email"]
//   → If a key has no matching field, shows it in the top banner

// Django REST Framework default shape:
response-map='{"successPath":"status","messagePath":"detail","errorsPath":"errors"}'

// Rails / simple JSON API shape:
response-map='{"successPath":"ok","messagePath":"message","errorsPath":"field_errors"}'

// Nested data — e.g. { "payload": { "status": "success", "user": {...} } }
response-map='{"successPath":"payload.status","messagePath":"payload.message","dataPath":"payload.user"}'

// No response-map needed if API returns HTTP 2xx = success, non-2xx = error:
// SmartForm falls back to response.ok when successPath key is not found

const form = document.querySelector('smart-form');

form.addEventListener('smart-form-success', (e) => {
  console.log('Saved:',    e.detail.message);
  console.log('Response:', e.detail.data);

  // Example: update a badge counter after adding a new item
  const badge = document.querySelector('#item-count');
  if (badge) badge.textContent = e.detail.data.total;
});

form.addEventListener('smart-form-error', (e) => {
  console.warn('Error:',  e.detail.message);
  console.warn('Fields:', e.detail.errors);
});

const form = document.querySelector('#editForm');

// Read all current values (e.g. before a manual fetch)
const payload = form.getValues();
// → { title: "Hello", status: "draft", body: "<p>...</p>", members: [{…}] }

// Pre-populate from an API response (edit form)
const article = await fetch('/api/articles/42/').then(r => r.json());
form.setValues({
  title:  article.title,
  status: article.status,
  body:   article.body,
});

// Trigger submit from an external button or keyboard shortcut
document.getElementById('save-shortcut').addEventListener('click', () => {
  form.submit();
});

// Reset the form manually (e.g. Cancel button)
document.getElementById('cancel-btn').addEventListener('click', () => {
  form.reset();
});

// Minimal custom element that SmartForm can collect and validate
class MyCustomField extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<input type="text" />`;
  }

  // SmartForm reads this
  getValue()        { return this.querySelector('input').value; }

  // SmartForm calls this for setValues()
  setValue(val)     { this.querySelector('input').value = val; }

  // SmartForm calls this when client-validate is set
  validate()        { return this.getValue().length > 0; }

  // SmartForm calls this when the server returns a field error
  showError(msg)    { /* render msg inline */ }

  // SmartForm calls this on reset()
  clear()           { this.querySelector('input').value = ''; }
}

customElements.define('my-custom-field', MyCustomField);

<!-- Usage inside smart-form: -->
<smart-form api-url="/api/save/">
  <my-custom-field name="custom_field"></my-custom-field>
  <button type="submit">Save</button>
</smart-form>

// ✕ WRONG — custom-submit-button and icon-button[post] fight over submit
<smart-form api-url="/api/save/">
  <smart-input name="title" ...></smart-input>
  <custom-submit-button post="/api/save/"></custom-submit-button>
</smart-form>
// → SmartForm logs an error and disables itself

// ✓ CORRECT — use a plain <button type="submit">
<smart-form api-url="/api/save/">
  <smart-input name="title" ...></smart-input>
  <button type="submit">Save</button>
</smart-form>