DevExtreme jQuery - Widget Options
To change the Form configuration at runtime, call the option(optionName, optionValue) method. This approach is more typical of jQuery.
JavaScript
$(function() {
var form = $("#formContainer").dxForm({
formData: {
firstName: "John",
lastName: "Heart",
phone: "+1(213) 555-9392",
email: "jheart@dx-email.com"
}
}).dxForm("instance");
$("#checkBoxContainer").dxCheckBox({
text: 'Disable the Form',
value: false,
onValueChanged: function (e) {
form.option("disabled", e.value);
}
});
});With Angular, bind the option to change to a component or element property.
HTML
TypeScript
<dx-form
[(formData)]="employee"
[disabled]="disableForm.value">
</dx-form>
<dx-check-box #disableForm
text="Disable the Form"
[value]="false">
</dx-check-box>
import { DxFormModule, DxCheckBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
employee = {
firstName: "John",
lastName: "Heart",
phone: "+1(213) 555-9392",
email: "jheart@dx-email.com"
}
}
@NgModule({
imports: [
// ...
DxFormModule,
DxCheckBoxModule
],
// ...
})See Also
- Get and Set Options - jQuery
- Change Options: Angular | AngularJS | Knockout
- Form Demos
- Form API Reference
Feedback