验证触发其他内容的下拉输入

Question

我有一个输入，<option>s 的 <select>，根据选择的输入，我希望显示更多输入字段。这就是它在 js 中的样子：

protectionInput: ko.computed({
    read: function () {
        return "";
    },
    write: function (value) {
        if (value == "Primary") {
            viewModel.enhancementVisible(true);
            viewModel.individualVisible(false);
        } else if(value == "IP14" || value == "IP16") {
            viewModel.enhancementVisible(false);
            viewModel.individualVisible(true);
        } else {
            viewModel.enhancementVisible(false);
            viewModel.individualVisible(false);
        }
    },
})

问题是，我还需要将其设为必填字段，以便选择其中一个选项。对于我的其他输入（使用 ko-validation），它有效：

someInput: ko.observable().extend({
    required: true,
}),

但是当我将它添加到上面计算的一个时，即使选择了一个选项，它也总是评估为无效。

有什么想法吗？如果我以愚蠢的方式做到了这一点，我很高兴重组。提前感谢您的帮助！

PS，这就是标记的样子：

<div class="form">
    <label>Type of protection</label>
    <select data-bind="value:protectionInput" required>
        <option value="" disabled selected hidden>Please select an option</option>
        <option>Primary</option>
        <option>FP12</option>
        <option>FP14</option>
        <option>FP16</option>
        <option>IP14</option>
        <option>IP16</option>
    </select>
    <label>Enhancement factor</label>
</div>
<div class="form" data-bind="visible: enhancementVisible">
    <input type="number" data-bind="value:enhancementInput" required min="0" max="100" />
</div>
<div class="form" data-bind="visible: individualVisible">
    <label>Individual factor</label>
    <input type="number" data-bind="value:individualInput" required />
</div>

Answer 1

有点不清楚你的代码是如何设置的，但我认为你最好将你的计算重组为一个可观察的并改用订阅。这样您就可以在可观察对象上使用验证，并在值更改时仍然更新其他属性。对于这个例子，我不得不对你的视图模型做出一些假设，所以如果你的属性不在你的视图模型的根目录上，你将不得不替换“自我”引用。

self.protectionInput = ko.observable("").extend({ required: true });

self.protectionInput.subscribe(function(value){
  if (value == "Primary") {
      self.enhancementVisible(true);
      self.individualVisible(false);
  } else if(value == "IP14" || value == "IP16") {
      self.enhancementVisible(false);
      self.individualVisible(true);
  } else {
      self.enhancementVisible(false);
      self.individualVisible(false);
  }
});