Question

我不清楚如何绑定任何空对象以使角度分量可以将其绑定到其范围。

我的Plunker代码在这里：https://plnkr.co/edit/TvHVch?p=preview

在上面的链接中，我有一个主详细信息表，详细信息部分有一个选项卡视图。在银行标签中，我有一个“新银行”按钮，点击此按钮我会启动一个表格以捕获新的银行行为。

我面临的问题是如何实例化一个空表单？我尝试了以下但它仍然导致问题。我正在使用devextreme angular forms（dx-form组件），但问题似乎更多的是如何绑定java脚本对象formData对象。

  bindingOptions: {
                formData: {}
            },

在plunker中，请参阅bank.create.controller.js文件以获取完整代码

此外，我想以这样的方式管理它，如果它们存在，我可以显示详细信息（我想根据数据的存在将其用作新建和编辑表单）

感谢您能在这里提供帮助。

function CreateBankController() {
     var vm = this;
        vm.popupForm = {
            colCount: 1,
            bindingOptions: {
                formData: {}
            },
            items: [{
                dataField: "fullName",
                validationRules: [{
                    type: "required",
                    message: "Full Name is required"
                }]
            }, {
                dataField: "shortName",
                validationRules: [{
                    type: "required",
                    message: "Short Name is required"
                }]
            }]
        };

ERROR

TypeError: Cannot read property 'fullname' of undefined
    at t._updateFieldValue (http://localhost:8199/ui/vendor/devextreme/js/dx.all.js:34:18126)
    at Object.<anonymous> (http://localhost:8199/ui/vendor/devextreme/js/dx.all.js:34:17945)
    at Function.each (http://localhost:8199/ui/vendor/jquery/dist/jquery.js:365:19)
    at t._syncDataWithItems (http://localhost:8199/ui/vendor/devextreme/js/dx.all.js:34:17818)
    at t._init (http://localhost:8199/ui/vendor/devextreme/js/dx.all.js:34:17672)
    at t._init (http://localhost:8199/ui/vendor/devextreme/js/dx.all.js:10:1985)
    at t.endUpdate (http://localhost:8199/ui/vendor/devextreme/js/dx.all.js:11:2521)
    at t.endUpdate (http://localhost:8199/ui/vendor/devextreme/js/dx.all.js:10:29014)
    at t.endUpdate (http://localhost:8199/ui/vendor/devextreme/js/dx.all.js:10:1985)
    at t.endUpdate (http://localhost:8199/ui/vendor/devextreme/js/dx.all.js:14:19793) <div id="form" dx-form="formCtrl.formOptions" class="dx-widget" role="form">

Answer 1

当您使用bindingOptions在双向绑定中绑定窗口小部件选项时，这意味着您为选项指定的值是范围中的字段。但是，您要为formData选项分配新对象，而不是范围变量名称。如果您手动创建新对象，请不要使用bindingOptions。

vm.popupForm = { colCount: 1, formData: {}, items: [{ dataField: "fullName", validationRules: [{ type: "required", message: "Full Name is required" }] }, { dataField: "shortName", validationRules: [{ type: "required", message: "Short Name is required" }] }] }; 请参阅https://plnkr.co/edit/fdXBWPWUSJz9nMa5I4PL?p=preview。

Answer 2

请使用以下方法，因为您定义formData的方法是错误的。在V 16.2中允许这种方法。所以你的功能将如下：

function CreateBankController() {
 var vm = this;
    vm.option = {
        colCount: 1,
        formData:{},
        items: [{
            dataField: "fullName",
            validationRules: [{
                type: "required",
                message: "Full Name is required"
            }]
        }, {
            dataField: "shortName",
            validationRules: [{
                type: "required",
                message: "Short Name is required"
            }]
        }]
    };

有关详细信息，请访问Devexpress Doc。

Angular - 绑定表单数据到表单（表单使用dev极端表单模板）

2 个答案: