From ed91cee3e7aaec6c267494c70f59c5634b51c03e Mon Sep 17 00:00:00 2001
From: cipchk <cipchk@qq.com>
Date: Fri, 11 May 2018 19:52:41 +0800
Subject: [PATCH] feat(form): add chang events in tag and checkbox, close #426

---
 .../form/src/widgets/checkbox/checkbox.widget.ts | 16 ++++++++++++++--
 packages/form/src/widgets/checkbox/index.md      |  1 +
 packages/form/src/widgets/tag/index.md           |  3 +++
 packages/form/src/widgets/tag/tag.widget.ts      | 11 +++++++++++
 4 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/packages/form/src/widgets/checkbox/checkbox.widget.ts b/packages/form/src/widgets/checkbox/checkbox.widget.ts
index 7b086620a..720ea58f3 100644
--- a/packages/form/src/widgets/checkbox/checkbox.widget.ts
+++ b/packages/form/src/widgets/checkbox/checkbox.widget.ts
@@ -31,7 +31,7 @@ import { SFSchemaEnum } from '../../schema';
             <label nz-checkbox
               [nzDisabled]="disabled"
               [ngModel]="value"
-              (ngModelChange)="setValue($event)">
+              (ngModelChange)="_setValue($event)">
               <span [innerHTML]="schema.title"></span>
               <span class="optional">
                 {{ ui.optional }}
@@ -95,10 +95,18 @@ export class CheckboxWidget extends ControlWidget {
     );
   }
 
+  _setValue(value: any) {
+    this.setValue(value);
+    this.detectChanges();
+    this.notifyChange(value);
+  }
+
   notifySet() {
+    const checkList = this.data.filter(w => w.checked);
     this.updateAllChecked().setValue(
-      this.data.filter(w => w.checked).map(item => item.value),
+      checkList.map(item => item.value),
     );
+    this.notifyChange(checkList);
   }
 
   groupInGridChange(values: any[]) {
@@ -127,4 +135,8 @@ export class CheckboxWidget extends ControlWidget {
     this.detectChanges();
     return this;
   }
+
+  private notifyChange(res: boolean | SFSchemaEnum[]) {
+    if (this.ui.change) this.ui.change(res);
+  }
 }
diff --git a/packages/form/src/widgets/checkbox/index.md b/packages/form/src/widgets/checkbox/index.md
index f270bcfef..1db0a547f 100644
--- a/packages/form/src/widgets/checkbox/index.md
+++ b/packages/form/src/widgets/checkbox/index.md
@@ -26,3 +26,4 @@ size | 大小，等同 `nzSize` | `string` | -
 styleType | radio的样式  | `default, button` | `default`
 checkAll | 是否需要全选  | `boolean` | -
 checkAllText | 全选按钮文本  | `string` | `全选`
+change | 值变更事件，参数：单个多选框为 `boolean`，否则为 `SFSchemaEnum[]` | `(res: boolean | SFSchemaEnum[]) => void` | -
diff --git a/packages/form/src/widgets/tag/index.md b/packages/form/src/widgets/tag/index.md
index 1224a7cbf..ba77f1618 100644
--- a/packages/form/src/widgets/tag/index.md
+++ b/packages/form/src/widgets/tag/index.md
@@ -19,3 +19,6 @@ enum | 数据源 | `SFSchemaEnumType[]` | -
 参数 | 说明 | 类型 | 默认值
 ----|------|-----|------
 asyncData | 异步数据源 | `() => Observable<SFSchemaEnumType[]>` | -
+afterClose | 关闭动画完成后的回调 | `() => void` | -
+onClose | 关闭时的回调，在 `nzMode="closable"` 时可用 | `(e:MouseEvent) => void` | -
+checkedChange | 设置标签的选中状态的回调 | `(status: boolean) => void` | -
diff --git a/packages/form/src/widgets/tag/tag.widget.ts b/packages/form/src/widgets/tag/tag.widget.ts
index b1121f851..f08ca1579 100644
--- a/packages/form/src/widgets/tag/tag.widget.ts
+++ b/packages/form/src/widgets/tag/tag.widget.ts
@@ -12,6 +12,8 @@ import { getData } from '../../utils';
       *ngFor="let i of data"
       nzMode="checkable"
       [nzChecked]="i.checked"
+      (nzAfterClose)="_afterClose()"
+      (nzOnClose)="_close($event)"
       (nzCheckedChange)="onChange(i)">
       {{i.label}}
     </nz-tag>
@@ -35,6 +37,15 @@ export class TagWidget extends ControlWidget {
   onChange(item: SFSchemaEnum) {
     item.checked = !item.checked;
     this.updateValue();
+    if (this.ui.checkedChange) this.ui.checkedChange(item.checked);
+  }
+
+  _afterClose() {
+    if (this.ui.afterClose) this.ui.afterClose();
+  }
+
+  _close(e: any) {
+    if (this.ui.onClose) this.ui.onClose(e);
   }
 
   private updateValue() {