驗證觸發其他東西的下拉輸入

我有一個輸入，<select>的<option> s，並根據選擇哪一個，我希望有更多的輸入字段出現。這是它在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驗證），它的工作原理：

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>

來源

2017-01-10 p44v9n

首先我猜你在哪裏設置你的變量true/false在計算的寫入部分你打算設置___可見（true/false）而不是___ Input（true/false）？ –

是的 - 精確地調整了變量名稱在這裏發佈，並清理了一點點的CSS，所以忘了改變它。（現在已經修復了任何未來的訪問者，並試圖瞭解此代碼） – p44v9n

這是一個有點不清楚你的代碼是如何設置的，但我想你會更好改制的計算爲一個可觀察和使用而不是訂閱。通過這種方式，您可以對observable使用驗證，並在值更改時更新其他屬性。我不得不對這個例子的視圖模型做一些假設，所以如果你的屬性不在視圖模型的根上，你將不得不替換「自我」引用。

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); 
    } 
});

來源

2017-01-10 23:51:15

啊輝煌，訂閱正是我所期待的。有一種感覺，我不應該在那裏使用計算。太棒了。謝謝傑森！ – p44v9n

驗證觸發其他東西的下拉輸入

回答

相關問題