Угловые - данные формы привязки к форме (форма использует шаблон формы экстренной формы)

Question

Я не знаю, как связать любой пустой объект, чтобы угловой компонент мог связать его с его объемом.

Мой Plunker код здесь: https://plnkr.co/edit/TvHVch?p=preview

В приведенной выше ссылке, у меня есть таблица мастер-деталь и раздел детали имеет вкладки,. Внутри банковской вкладки у меня есть кнопка «Новый банк», при нажатии на нее я запускаю форму для захвата новых банковских счетов.

Проблема, с которой я столкнулся, - как создать экземпляр пустой формы? Я попробовал ниже, но это все еще вызывает проблемы. Я использую devextreme угловые формы (компонент dx-form), но проблема больше связана с тем, как связать объект java-скрипта objectData.

bindingOptions: { 
       formData: {} 
      }, 

В plunker пожалуйста, обратитесь bank.create.controller.js файл для полного кода

Кроме того, я хотел бы управлять таким образом, что я могу показать детали, если они присутствуют (I хотите использовать его как новую и редактируемую форму в зависимости от наличия данных)

Цените, если вы можете помочь здесь.

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" 
       }] 
      }] 
     }; 

ОШИБКА

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

Пожалуйста, используйте следующий подход, так как ваш способ определения формыДата неверна. В 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.