Knockout Input Swap

Input to Select swap

by db_dev

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<!-- ko if: useInput -->
<input type="text" class="form-control" data-bind="value:valueType" />
<!-- /ko -->

<!-- ko if: useSelect -->
<label for=""></label>
<select class="form-control" data-bind="options: valueList,
                       optionsText: 'text',
                       optionsValue: 'id',
                       value: valueType,
                       optionsCaption: '--Choose Text Option--'"></select>
<!-- /ko -->
<p data-bind="text:valueType"></p>


<input data-bind='value: pages, valueUpdate: "afterkeydown"' />
<span data-bind='visible: pages.min, text: pages.max'> </span>

<input data-bind="value:fieldAttr.value, attr:{type:fieldAttr.type, min:fieldAttr.min, max:fieldAttr.max}" />
<button class="btn btn-sm btn-info" data-bind="click: changeToText">Change to Text</button>

CSS

.row {
    background: #f8f9fa;
    margin-top: 20px;
}

.col {
    border: solid 1px #6c757d;
    padding: 10px;
}

JavaScript

var valueData = [{
    id: 111,
    text: "Road 111"
}, {
    id: 222,
    text: "Road 222"
}, {
    id: 333,
    text: "Road 333"
}];

ko.extenders.requiredField = function(target, message) {
    target.min = ko.observable();
    target.max = ko.observable();

    function validate(newValue) {
        target.min(newValue ? false : true);
        target.max(newValue ? "" : message || "* required");
    }

    validate(target());
    target.subscribe(validate);

    return target;
};

ko.extenders.fieldSettings = function(target, option) {
    var self = this; // Makes it easier to identify the root.
    self.type = ko.observable(option.type);
    self.min = ko.observable(option.min);
    self.max = ko.observable(option.max);
    self.value = ko.observable(option.value);

    /* function validate(newValue) {
       target.min(newValue ? false : true);
       target.max(newValue ? "" : message || "* required");
    }
 
    validate(target());
    target.subscribe(validate);*/

    return option;
};
// Main
var MainViewModel = function() {
    var self = this; // Makes it easier to identify the root.

    // Asset Class
    self.valueType = ko.observable("Some Text");
    self.useInput = ko.observable(true);
    self.useSelect = ko.observable(true);
    self.valueList = ko.observableArray(valueData);

    self.pages = ko.observable('pages').extend({
        requiredField: "Whatever man!"
    });
    self.fieldAttr = ko.observable("My Value").extend({
        fieldSettings: {
            min: 1,
            max: 10,
            type: 'number',
            value: 5
        }
    });
    self.changeToText = function() {
	self.fieldAttr=([]);
      self.fieldAttr.push({
            min: '',
            max: '',
            type: 'text',
            value: "My Field"
        });
    }
};

// Main VM
var adminVm = new MainViewModel();
$(document).ready(function() {
    ko.applyBindings(adminVm);
});