Question

我使用Angular Formly并且如果模型是范围的值，则效果非常好，如字符串：

{
    key: 'name',
    type: 'input'
}

问题在于我使用更精细的对象来处理模型，使用＆＃34;控制器作为＆＃34;语法和名称作为用户对象的一部分：

vm.user = {name: 'john', lastname: 'doe'}

当然，关键是：

{
    key: 'user.name',
    type: 'input'
}

（通常vm以形式表示法从键中取出）。

问题是Formly使用括号表示法来处理模型：

template = '<input ng-model=\"model[options.key]\">'

处理时，吐出此输出：

<input name="bd.form_input_user.name_1" type="text" ng-model="model.user.name">

当然，该模型没有用户对象和空字段显示。

所以，我的问题是：当它是一个更复杂的对象时，如何将适当的对象传递或链接到形式模型？

提前致谢。

Answer 1

可以在表单和字段级别定义模型，因此很容易将对象图中的任何属性用作表单字段。一个例子：

标记：

<div ng-controller="MyCtrl as vm">
    <formly-form model="vm.data" fields="vm.userFields">
        <button type="submit" class="btn btn-default" ng-click="vm.submit(vm.user)">Submit</button>
    </formly-form>
</div>

JavaScript的：

angular
  .module('myApp', ['formly', 'formlyBootstrap'])
  .controller('MyCtrl', ['$scope', function($scope) {

    var vm = this;

    vm.data = {
        user: {
            name: 'john',
            lastname: 'doe'
        },
        extra: 'extra'
    };

    vm.userFields = [
        {
        model: vm.data.user,
        key: 'name',
        type: 'input',
        templateOptions: {
            type: 'text',
            label: 'Name',
            placeholder: 'Enter name'
            }
        },
        {
        model: vm.data.user,
        key: 'lastname',
        type: 'input',
        templateOptions: {
            type: 'text',
            label: 'Lastname',
            placeholder: 'Enter lastname'
            }
        },
        {
        key: 'extra',
        type: 'input',
        templateOptions: {
            type: 'text',
            label: 'Extra',
            placeholder: 'Enter extra'
        }}
    ];
}]);

小提琴：http://jsfiddle.net/masa671/c37gxg3h/

具有复杂对象的角度形式模型

1 个答案: