I am working on "Rules" for form builder.
I want to show/hide text box based on the dropdown selected.
For example, let us assume we have a following "Rules" for a "TextField" control under "Form Builder"
Rule# Control(dropdown) Condition(dropdown) Value(as input textbox)
1 TextBox_1 Is filled out (Text Input NOT REQUIRED)
2 TextBox_2 Contains Hi
From the above, for Rule 1, the text input is not required and for Rule 2, Text Input is required.
The above is my scenario.
What I tried:
HTML content:
//Dropdown for "Condition"
<select
class="form-control"
data-bind="
value: selectedValue
options: ruleConditions().options(),
optionsText: 'Name',
optionsValue: 'Value',
optionsCaption: 'Choose condition'">
</select>
//Input text field for "Value"
<input
type="text"
class="form-control"
data-bind="visible: ruleConditions().selectedValue()" />
KnockoutJS Content:
I have two view Models.
1) FormViewModel
2) TextBoxViewModel
Also, I have one array which contains options
for the dropdown.
And my implementation are as follows:
//Options Available in Array
var RuleConditionArray = {
// Options for "Text Field" under Rules tab
textFieldConditions: ko.observableArray
(
[
{
Name: 'is filled out',
Value: 'isfilledout',
isExpressionValueRequired: false
},
{
Name: 'contains',
Value: 'contains',
isExpressionValueRequired: true
}
]
)
};
//Form View Model
function FormVM() {
var self = this;
self.textBoxVM = ko.observable(new TextBoxViewModel(Id,Name));
}
//TextField View Model
function TextBoxViewModel(Id, Name) {
var Txt = this;
Txt.CommonProperties = new CommonViewModel(Id, Name);
// Initialize Rule Conditions from Array.
Txt.ruleConditions = ko.observable(new RuleConditionViewModel(RuleConditionArray.textFieldConditions()));
Txt.selectedItem = ko.observable();
Txt.selectedValue = ko.computed(function () {
return this.selectedItem() && this.selectedItem().isExpressionValueRequired
}, this);
}
formView = new FormVM();
ko.applyBindings(formView);
What I get:
From the above code, I am able to populate the dropdown with values.
What I did not get:
I am unable to show/hide
Value
text input field for "Rules". I need to get the value of isExpressionValueRequired
and show/hide "Value
" input text field based on this value.
I am struck with this. Kindly help me to get rid off this.
Edit - 1 : My Fiddle:
https://jsfiddle.net/vikash208/z4x5meua/3/