2

我有以下StimulusJS控制器，旨在跟踪某些required元素（flatckpickr日期选择器）。

一旦选择了所有这些日期选择器的日期，我必须在表单中启用提交按钮。

我在跟踪用户输入了所有必需的输入时遇到了问题，因为这应该是一个可重用的控制器，所以我无法对值进行硬编码并与之进行比较。

什么是检查所有人requiredTargets都已收到用户输入的有效方法？

import { Controller } from 'stimulus';

export default class extends Controller {
  static targets = ["required", "deactivable"];

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

  connect() {
    
    this.requiredTargets.forEach((element) => {

      element.addEventListener('input', (event) => {

        console.log(`${element} changed`);

        //if (this.requiredTargets.inputed?) {
          toggle();
        }
      })
    })
  }
}
4

1 回答 1

1

从技术上讲，默认情况下输入字段将有value一个空字符串 ("")

您可以使用 JavaScriptArray.every方法检查所有必填字段是否已填写且不等于空字符串。

这将返回trueor false，根据具体情况，您可以调用该toggle()方法

我的方法

在每个flatpickr HTML 输入元素上，连接一个触发事件的Stimulus 操作方法。input

让我们在这种情况下调用它handleInput，所以我们的 HTML 应该是这样的

<input
  data-<controller-name>-target="required"
  data-action="<controller-name>#handleInput"
  type="text"
  placeholder="Select Date.."
  data-input
>
<!-- replace <controller-name> with the actual stimulus controller name -->

接下来，handleInput像这样在控制器中定义方法

handleInput() {
  const isRequiredFilled = this.requiredTargets.every(el => el.value !== '');

  if (isRequiredFilled) {
    this.toggle();
  }
}

注意：输入元素有一个默认的输入事件，所以你不必自己处理。请参阅文档

于 2021-04-15T15:51:44.427 回答