Update Form Data in Code

If you need to update form data at runtime, redefine the formData object. In this case, form item values are updated automatically and the widget is rerendered from scratch. In the following example, the SelectBox widget changes the formData object.

JavaScript
var employees = [{
    name: "John Heart",
    position: "CEO",
    officeNo: "901"
}, {
    name: "Bill Silver",
    position: "HR Manager",
    officeNo: "905"
}];

$(function() {
    var form = $("#formContainer").dxForm({
        formData: employees[0]
    }).dxForm("instance");

    $("#employeeSelector").dxSelectBox({
        displayExpr: "name",
        dataSource: employees,
        value: employees[0],
        onValueChanged: function(data) {
            form.option("formData", data.value);
        }
    });
});

If you use the MVVM approach, provide two-way binding for the formData object.

AngularJS

JavaScript
angular.module('DemoApp', ['dx'])
    .controller('DemoController', function DemoController($scope) {
        $scope.employees = [{
            name: "John Heart",
            position: "CEO",
            officeNo: "901"
        }, {
            name: "Bill Silver",
            position: "HR Manager",
            officeNo: "905"
        }];
        $scope.data = $scope.employees[0];
    });
HTML
<div ng-controller="demoController">
    <div dx-select-box="{
        displayExpr: 'name',
        dataSource: employees,
        bindingOptions: {
            value: 'data'
        }
    }"></div>
    <div dx-form="{
         bindingOptions: {
            'formData': 'data'
         }
    }"></div>
</div>

Knockout

JavaScript
var employees = [{
        name: "John Heart",
        position: "CEO",
        officeNo: "901"
    }, {
        name: "Bill Silver",
        position: "HR Manager",
        officeNo: "905"
    }];

var viewModel = {
    data: ko.observable(employees[0]),
    employees: employees
};

ko.applyBindings(viewModel);
HTML
<div data-bind="dxForm: {
    formData: data
}"></div>
<div data-bind="dxSelectBox: {
    dataSource: employees,
    displayExpr: 'name',
    value: data
}"></div>

View Demo

The Form widget provides methods that update specific formData fields and rerender the corresponding editors without rerendering the whole widget. The updateData(dataField, value) method updates the value of a single field. The updateData(data) method updates values of several fields at once. In the following code, these methods are called on the Button click.

JavaScript
$(function() {
    var form = $("#formContainer").dxForm({
        formData: {
            firstName: "Joe",
            lastName: "Heart",
            phone: "+1(213) 555-9392"
        }
    }).dxForm("instance");

    $("#updatePhone").dxButton({
        text: 'Update the Phone Number',
        onClick: function () {
            form.updateData("phone", "+1(333) 888-7698");
        }
    });

    $("#updateName").dxButton({
        text: 'Update the Name',
        onClick: function () {
            form.updateData({
                firstName: "John",
                lastName: "Doe"
            });
        }
    });
});
See Also