Проверка выпадающего ввода, который запускает что-то еще

Question

У меня есть вход, <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); 
     } 
    }, 
}) 

Проблема, мне нужно, чтобы это было обязательное поле так, что выбран один из вариантов. Для моих других входов получили это (используя Ко-проверки), которая работает:

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