Knockout Validation on Nested View Model

Question

I am looking to use a combination of the KnockoutJS libarary, the Knockout.Mapping plugin, and the Knockout-Validation plugin to display some data that the user can manipulate.

My data is coming over as a nested object from an AJAX call, and I run that data through the mapping plugin to create a Knockout view model, customizing the validation rules with the mapping options object in ko.mapping.fromJS.

I have been successful in getting objects at the first layer (name in the Fiddle below) to show a message if the field is empty, however objects that are nested (IntroData.PlanName) do not show the validation message. Do I need to setup the mapping object differently for these nested objects?

ViewModel (sample of what is coming in my AJAX call):

var stuff = {
    IntroData: {
        PlanName: 'Test'
    },
    name: 'tes2s3t'
};

Mapping:

var validationMapping = {
    IntroData: {
        PlanName: {
            create: function (options) {
                return ko.observable(options.data).extend({
                    required: true
                });
            }
        }
    },
    name: {
        create: function (options) {
            return ko.observable(options.data).extend({
                required: true
            });
        }
    }
};

Hookup:

ko.validation.init({
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: true,
    parseInputAttributes: true,
    messageTemplate: null,
    grouping: {
        deep: true
    }
}, true);

window.viewModel = ko.validatedObservable(ko.mapping.fromJS(stuff, validationMapping));

ko.applyBindings(window.viewModel);

Fiddle: http://jsfiddle.net/odxv53g9/5/

Thanks!

Sam Arustamyan Sam Arustamyan · Accepted Answer · 2015-06-12T19:15:58

The documentation is not clear on this, but apparently ko.mapping.fromJS() ignores nested mappings, so the "create" method for PlanName never gets called.

You could add an explicit mapping for IntroData instead:

IntroData: {
    create: function (options) {
        var nestedMapping = {
            PlanName: {
                create: function (options) {
                    return ko.observable(options.data).extend({
                        required: true
                    });
                }
            }
        }

        return ko.mapping.fromJS(options.data, nestedMapping);
    }        
}

Here is a working fiddle: http://jsfiddle.net/odxv53g9/6/

Knockout Validation on Nested View Model

1 Answers