How to check that all target values have changed in StimulusJS?

Viewed 971

I have an index page where I have to filter Invoices by due_date to prepare them for mass edition. The idea is to keep the submit button disabled until a start_date and end_date have been selected.

I have the following simple_form working with flatpickrJS and I have added data-targets to it's input fields:

<div class="col-md-6 my-2">
  <%= simple_form_for :date_params, { url: admin_invoices_batch_edit_index_path, method: :get } do |f| %>
    <%= f.input :start_date, as: :string, placeholder: "Start date for filter",
                                                  input_html: { data:{ controller: "flatpickr", target: "required",
                                                                attributes:{ enableTime: false, enableSeconds: false } } }
                                                                 %>
    <%= f.input :end_date, as: :string, placeholder: "End date for filter", input_html: { data:{ controller: "flatpickr", target: "required",
                                                             attributes:{ enableTime: false, enableSeconds: false } }
                                                             }
                                                             %>
    <%= f.button :submit, "Filtrar por fecha" %>
  <% end %>
</div>

I also have this other simple_form to select a due_date to which all Invoices will be updated, and I need to keep this form's submit button disabled until all required targets have been selected (that is until a start and end date has been selected in the first form).

<div class="col-md-6 my-2" data-controller="activable">
    <%= simple_form_for :due_date, { url: admin_invoices_batch_edit_index_path } do |f| %>
      <%= f.input :due_date, as: :string, placeholder: "Nueva fecha de recibo",
      input_html: { data:{ controller: "flatpickr",
        attributes:{ enableTime: false, enableSeconds: false } } }
        %>
      <% if params[:date_params].present? %>
        <%= hidden_field_tag :start_date, params[:date_params][:start_date] %>
        <%= hidden_field_tag :end_date, params[:date_params][:end_date] %>
       <% end %>
       <%= f.button :submit, "Update Invoices", id: "deactivable-submit", disabled: true %>
    <% end %>
  </div>

This is my Stimulus controller but I don't know how to check that all requiredTargets have been selected so the disabled button gets enabled.

import { Controller } from 'stimulus';

export default class extends Controller {
  static targets = ['deactivable required']
  initialize() {
  }

  connect() {
    this.requiredTargets.forEach((element) => {
      element.config.onChange.push(function() { } ); })
    // check that all required targets have been selected?
  }

  toggle(){
    this.deactivableTargets.toggleAttribute("disabled");
  }

}
0 Answers
Related