Stimulus.js and Rails remote forms with error handling

_comment.html.slim

- # app/views/comments/_comment.html.slim

li data-controller="comment" data-action="click->comment#hello"
  = "#{comment.message} by #{comment.user.email}"

_error.html.slim

- # app/views/comments/_error.html.slim

- comment.errors.full_messages.each do |error|
 li = error

comment_list_controller.js

// app/javascript/controllers/comment_list_controller.js

import { Controller } from "stimulus";

export default class extends Controller {
  static targets = ["text", "commentList", "commentErrors"]

  onPostSuccess(event) {
    let [data, status, xhr] = event.detail;
    this.commentListTarget.innerHTML += xhr.response;
    this.textTarget.value = "";
    this.commentErrorsTarget.innerText = "";
  }

  onPostError(event) {
    let [data, status, xhr] = event.detail;
    this.commentErrorsTarget.innerHTML = xhr.response;
  }
}

comments_controller.rb

# app/controllers/comments_controller.rb

class CommentsController < ApplicationController
  def index
    @comments = Comment.all
  end

  def create
    @comment = current_user.comments.create(comment_params)

    if @comment.errors.any?
      render partial: 'error', comment: @comment, status: :bad_request
    else
      render @comment
    end
  end

  private_error

  def comment_params
    params.require(:comment).permit(:message)
  end
end

index.html.slim

- # app/views/comments/index.html.slim

h1 Comments

.comment-list data-controller="comment-list"
  ul.comment-errors data-target="comment-list.commentErrors"
  ul.comments-list data-target="comment-list.commentList"
    = render @comments

  = bootstrap_form_with model: Comment.new,
    html: { data: { type: "html",
                     action: "ajax:success->comment-list#onPostSuccess ajax:error->comment-list#onPostError" } } do |form|
    = form.text_area :message, hide_label: true, placeholder: "New comment...", data: { target: "comment-list.text" }
    = form.submit "Post Comment"