chore: model first

Author: cipchk

src/app/demo/demo.component.html

@@ -1,7 +1,12 @@
 <nz-sf
 [schema]="schema"
+[(model)]="model"
 [actions]="actions" (change)="value=$event.value"></nz-sf>
 
+<p>
+    {{ model | json }}
+</p>
+
 <p>
     {{ value | json }}
 </p>

src/app/demo/demo.component.ts

@@ -18,6 +18,12 @@ export class DemoComponent {
         }
     };
 
+    model: any = {
+        id: 1,
+        name: 'test',
+        age: 10
+    };
+
     schema = {
         debug: true,
         properties: {
@@ -30,32 +36,25 @@ export class DemoComponent {
                 },
                 minLength: 3
             },
-            password: {
-                type: 'string',
-                title: '密码',
-                widget: {
-                    type: 'password',
-                    placeholder: '请输入密码，且6位以上'
-                },
-                minLength: 6
+            'menu': {
+                'type': 'object',
+                title: 'test',
+                'properties': {
+                    'id': {
+                        'type': 'string',
+                        'title': '菜单',
+                        span_label: 5,
+                        span_control: 5
+                    },
+                    'title': {
+                        'type': 'string',
+                        'title': '标题',
+                        span_label: 5,
+                        span_control: 5
+                    }
+                }
             }
         },
-        required: ['name', 'password'],
-        button: {
-            items: [
-                {
-                    label: '登录',
-                    id: 'send',
-                    submit: true,
-                    popconfirm: true,
-                    poptitle: '123'
-                },
-                {
-                    label: '重置',
-                    id: 'reset'
-                }
-            ]
-        }
     };
 
     constructor(private msg: NzMessageService) {

src/app/example/basic/basic.component.html

@@ -4,26 +4,26 @@ <h3>水平布局：</h3>
     <ng-template #body>
         <nz-sf layout="horizontal"
             [schema]="DATA.horizontal.schema"
-            [model]="DATA.horizontal.model"
-            [actions]="actions" (change)="DATA.horizontal.value=$event.value"></nz-sf>
+            [(model)]="DATA.horizontal.model"
+            [actions]="actions"></nz-sf>
     </ng-template>
 </nz-card>
 <h3>垂直布局：</h3>
 <nz-card>
     <ng-template #body>
         <nz-sf layout="vertical"
             [schema]="DATA.vertical.schema"
-            [model]="DATA.vertical.model"
-            [actions]="actions" (change)="DATA.vertical.value=$event.value"></nz-sf>
+            [(model)]="DATA.vertical.model"
+            [actions]="actions"></nz-sf>
     </ng-template>
 </nz-card>
 <h3>内联布局：</h3>
 <nz-card>
     <ng-template #body>
         <nz-sf layout="inline"
             [schema]="DATA.inline.schema"
-            [model]="DATA.inline.model"
-            [actions]="actions" (change)="DATA.inline.value=$event.value"></nz-sf>
+            [(model)]="DATA.inline.model"
+            [actions]="actions"></nz-sf>
     </ng-template>
 </nz-card>
 <div ace-editor

src/app/example/basic/basic.component.ts

@@ -20,17 +20,14 @@ export class ExampleBasicComponent {
     DATA: any = {
         horizontal: {
             code: '' + require('!!raw-loader!../../schema/login-schema.json'),
-            value: {},
             model: { email: 'cipchk@qq.com' }
         },
         vertical: {
             code: '' + require('!!raw-loader!../../schema/login-schema.json'),
-            value: {},
             model: { email: 'cipchk@qq.com' }
         },
         inline: {
             code: '' + require('!!raw-loader!../../schema/login-schema.json'),
-            value: {},
             model: { email: 'cipchk@qq.com' }
         }
     };

src/app/example/conditional/conditional.component.html

@@ -2,8 +2,7 @@ <h1>条件表单</h1>
 <p>通过配置 Schema 的 <code>visibleIf</code> 属性根据条件表达式显示表单，例如：根据不同登录方式渲染不同表单</p>
 <nz-sf
     [schema]="DATA.schema"
-    [model]="DATA.model"
-    [actions]="actions"
-    (change)="DATA.value=$event.value"></nz-sf>
-{{ DATA.value | json }}
+    [(model)]="DATA.model"
+    [actions]="actions"></nz-sf>
+{{ DATA.model | json }}
 <markdown [data]="demo"></markdown>

src/app/example/fixed/demo.md

@@ -6,7 +6,7 @@ import { NzMessageService } from 'ng-zorro-antd';
 @Component({
     selector: 'app-example-fixed',
     template: `
-    <nz-sf [schema]="schema" [model]="model" [actions]="actions" (change)="value=$event.value">
+    <nz-sf [schema]="schema" [(model)]="model" [actions]="actions">
         <ng-template nz-template="custom" let-control let-schema>
             <nz-input [formControl]="control">
                 <ng-template #addOnBefore>http://</ng-template>
@@ -17,7 +17,6 @@ import { NzMessageService } from 'ng-zorro-antd';
     `
 })
 export class ExampleFixedComponent {
-    value: any;
     schema: SFSchema = {
         debug: true,
         span_label_fixed: 100,

src/app/example/fixed/fixed.component.html

@@ -1,12 +1,13 @@
 <h1>不规则列布局</h1>
 <p>通过配置 Schema 的 <code>span_label_fixed</code>、<code>grid</code> 属性构建不同列刚需布局。</p>
 <p>布局技巧：利用24格栅格系统先划分列数，再配合指定字段属性 <code>grid</code> 参数来指定字段渲染格数；始终保持一行 <code>24</code> 格。</p>
-<nz-sf [schema]="schema" [model]="model" [actions]="actions" (change)="value=$event.value">
+<nz-sf [schema]="schema" [(model)]="model" [actions]="actions">
     <ng-template nz-template="custom" let-control let-schema>
         <nz-input [formControl]="control">
             <ng-template #addOnBefore>http://</ng-template>
             <ng-template #addOnAfter>.com</ng-template>
         </nz-input>
     </ng-template>
 </nz-sf>
+model: {{ model | json }}
 <markdown [data]="demo"></markdown>

src/app/example/fixed/fixed.component.ts

@@ -7,7 +7,6 @@ import { NzMessageService } from 'ng-zorro-antd';
     templateUrl: './fixed.component.html'
 })
 export class ExampleFixedComponent {
-    value: any;
     schema: SFSchema = {
         debug: true,
         span_label_fixed: 100,

src/app/example/sort/sort.component.html

@@ -2,7 +2,6 @@ <h1>调整顺序</h1>
 <p>通过配置 Schema 的 <code>order</code> 数组属性可以按需求改变表单渲染顺序。<strong>注：</strong> 若指定顺序则必须包含所有属性。</p>
 <nz-sf
     [schema]="DATA.schema"
-    [model]="DATA.model"
-    (change)="DATA.value=$event.value"></nz-sf>
-{{ DATA.value | json }}
+    [model]="DATA.model"></nz-sf>
+model: {{ DATA.model | json }}
 <markdown [data]="demo"></markdown>

src/app/example/sort/sort.component.ts

@@ -8,7 +8,6 @@ import { SFSchema, PropertyGroup, FormProperty } from 'nz-schema-form';
 })
 export class ExampleSortComponent {
     DATA: any = {
-        value: {},
         model: { name: 'cipchk' }
     };