/ 複雑なオブジェクト - 角形、角形 - 角形

複雑な物体 - 角形をもつ角形モデル

私はAngular Formlyを使っていますが、モデルが文字列のようにスコープの値であればうまく動作します:

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

問題は、「コントローラとして」の構文とユーザーオブジェクトの一部としての名前を使用して、モデルを処理するために、より洗練されたオブジェクトを使用していることです。

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">

もちろん、モデルにはユーザーオブジェクトがなく、空のフィールドが表示されます。

だから、私の質問です:どのように渡すか、適切なオブジェクトをformlyモデルにリンクすることができますそれはより複雑なオブジェクトですか?

前もって感謝します。

回答:

回答№1は5

モデルはフォームとフィールドレベルの両方で定義できるため、オブジェクトグラフの任意のプロパティをフォームフィールドとして使用するのは簡単です。例:

マークアップ:

<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/