From 11b63d4b4077155472de5660dca2a1646485f834 Mon Sep 17 00:00:00 2001
From: chenfubing <fbchen@fbchendeMacBook-Pro.local>
Date: Thu, 21 Sep 2017 20:42:46 +0800
Subject: [PATCH] fix(module:cascader): select and render leaf label & reset in
 reactive form (#335) (#336)

---
 .../cascader/nz-cascader.component.ts         | 11 +--
 .../nz-demo-cascader-basic.component.ts       |  4 +
 ...emo-cascader-change-on-select.component.ts |  4 +
 ...z-demo-cascader-custom-render.component.ts |  4 +
 ...-demo-cascader-custom-trigger.component.ts |  4 +
 ...z-demo-cascader-default-value.component.ts |  4 +
 .../nz-demo-cascader-disabled.component.ts    |  4 +
 .../nz-demo-cascader-hover.component.ts       |  4 +
 .../nz-demo-cascader-lazy.component.ts        |  4 +
 ...z-demo-cascader-reactive-form.component.ts | 84 +++++++++++++++++++
 .../nz-demo-cascader-size.component.ts        | 14 +++-
 .../nz-demo-cascader.component.ts             |  1 +
 .../nz-demo-cascader/nz-demo-cascader.html    |  7 ++
 .../nz-demo-cascader.module.ts                |  8 +-
 14 files changed, 145 insertions(+), 12 deletions(-)
 create mode 100644 src/showcase/nz-demo-cascader/nz-demo-cascader-reactive-form.component.ts

diff --git a/src/components/cascader/nz-cascader.component.ts b/src/components/cascader/nz-cascader.component.ts
index 0108c00be98..f83a86dad2a 100644
--- a/src/components/cascader/nz-cascader.component.ts
+++ b/src/components/cascader/nz-cascader.component.ts
@@ -37,7 +37,7 @@ function noop(): void { }
 
 function toArray(value: any): any[] {
   let ret = value;
-  if (value === undefined) {
+  if (value === undefined || value === null) {
       ret = [];
   } else if (!Array.isArray(value)) {
       ret = [value];
@@ -762,6 +762,11 @@ export class NzCascaderComponent implements OnInit, OnDestroy, OnChanges, AfterV
       }, (reason: any) => {
         option.isLeaf = true;
       });
+    } else {
+      // clicking leaf node will remove any children columns
+      if (index < this._nzColumns.length - 1) {
+        this._nzColumns = this._nzColumns.slice(0, index + 1);
+      }
     }
 
     // 生成显示
@@ -982,10 +987,6 @@ export class NzCascaderComponent implements OnInit, OnDestroy, OnChanges, AfterV
    * @Override (From ControlValueAccessor interface)
    */
   writeValue(value: any): void {
-    if (value == null) {
-      return;
-    }
-
     const array: any[] = [];
     toArray(value).forEach((v: any, index: number) => {
       if (typeof v !== 'object') {
diff --git a/src/showcase/nz-demo-cascader/nz-demo-cascader-basic.component.ts b/src/showcase/nz-demo-cascader/nz-demo-cascader-basic.component.ts
index 910a57866db..0c6ccd0e61a 100644
--- a/src/showcase/nz-demo-cascader/nz-demo-cascader-basic.component.ts
+++ b/src/showcase/nz-demo-cascader/nz-demo-cascader-basic.component.ts
@@ -11,6 +11,10 @@ const init_options = [{
       label: 'West Lake',
       isLeaf: true
     }],
+  }, {
+    value: 'ningbo',
+    label: 'Ningbo',
+    isLeaf: true
   }],
 }, {
   value: 'jiangsu',
diff --git a/src/showcase/nz-demo-cascader/nz-demo-cascader-change-on-select.component.ts b/src/showcase/nz-demo-cascader/nz-demo-cascader-change-on-select.component.ts
index fbc6ebc1b7d..0b4da2466a1 100644
--- a/src/showcase/nz-demo-cascader/nz-demo-cascader-change-on-select.component.ts
+++ b/src/showcase/nz-demo-cascader/nz-demo-cascader-change-on-select.component.ts
@@ -11,6 +11,10 @@ const options = [{
       label: 'West Lake',
       isLeaf: true
     }],
+  }, {
+    value: 'ningbo',
+    label: 'Ningbo',
+    isLeaf: true
   }],
 }, {
   value: 'jiangsu',
diff --git a/src/showcase/nz-demo-cascader/nz-demo-cascader-custom-render.component.ts b/src/showcase/nz-demo-cascader/nz-demo-cascader-custom-render.component.ts
index c96bf48c49c..4515364dbb7 100644
--- a/src/showcase/nz-demo-cascader/nz-demo-cascader-custom-render.component.ts
+++ b/src/showcase/nz-demo-cascader/nz-demo-cascader-custom-render.component.ts
@@ -12,6 +12,10 @@ const options = [{
       code: 752100,
       isLeaf: true
     }],
+  }, {
+    value: 'ningbo',
+    label: 'Ningbo',
+    isLeaf: true
   }],
 }, {
   value: 'jiangsu',
diff --git a/src/showcase/nz-demo-cascader/nz-demo-cascader-custom-trigger.component.ts b/src/showcase/nz-demo-cascader/nz-demo-cascader-custom-trigger.component.ts
index ec6b73da591..87ae55631f4 100644
--- a/src/showcase/nz-demo-cascader/nz-demo-cascader-custom-trigger.component.ts
+++ b/src/showcase/nz-demo-cascader/nz-demo-cascader-custom-trigger.component.ts
@@ -11,6 +11,10 @@ const options = [{
       label: 'West Lake',
       isLeaf: true
     }],
+  }, {
+    value: 'ningbo',
+    label: 'Ningbo',
+    isLeaf: true
   }],
 }, {
   value: 'jiangsu',
diff --git a/src/showcase/nz-demo-cascader/nz-demo-cascader-default-value.component.ts b/src/showcase/nz-demo-cascader/nz-demo-cascader-default-value.component.ts
index ddfeca5ded7..608ce17e26f 100644
--- a/src/showcase/nz-demo-cascader/nz-demo-cascader-default-value.component.ts
+++ b/src/showcase/nz-demo-cascader/nz-demo-cascader-default-value.component.ts
@@ -11,6 +11,10 @@ const options = [{
       label: 'West Lake',
       isLeaf: true
     }],
+  }, {
+    value: 'ningbo',
+    label: 'Ningbo',
+    isLeaf: true
   }],
 }, {
   value: 'jiangsu',
diff --git a/src/showcase/nz-demo-cascader/nz-demo-cascader-disabled.component.ts b/src/showcase/nz-demo-cascader/nz-demo-cascader-disabled.component.ts
index 6d42f191141..a7c310f8c12 100644
--- a/src/showcase/nz-demo-cascader/nz-demo-cascader-disabled.component.ts
+++ b/src/showcase/nz-demo-cascader/nz-demo-cascader-disabled.component.ts
@@ -11,6 +11,10 @@ const options = [{
       label: 'West Lake',
       isLeaf: true
     }],
+  }, {
+    value: 'ningbo',
+    label: 'Ningbo',
+    isLeaf: true
   }],
 }, {
   value: 'jiangsu',
diff --git a/src/showcase/nz-demo-cascader/nz-demo-cascader-hover.component.ts b/src/showcase/nz-demo-cascader/nz-demo-cascader-hover.component.ts
index ca8219098c3..c73d745a6d3 100644
--- a/src/showcase/nz-demo-cascader/nz-demo-cascader-hover.component.ts
+++ b/src/showcase/nz-demo-cascader/nz-demo-cascader-hover.component.ts
@@ -11,6 +11,10 @@ const options = [{
       label: 'West Lake',
       isLeaf: true
     }],
+  }, {
+    value: 'ningbo',
+    label: 'Ningbo',
+    isLeaf: true
   }],
 }, {
   value: 'jiangsu',
diff --git a/src/showcase/nz-demo-cascader/nz-demo-cascader-lazy.component.ts b/src/showcase/nz-demo-cascader/nz-demo-cascader-lazy.component.ts
index a287251f074..ceeed274c6f 100644
--- a/src/showcase/nz-demo-cascader/nz-demo-cascader-lazy.component.ts
+++ b/src/showcase/nz-demo-cascader/nz-demo-cascader-lazy.component.ts
@@ -12,6 +12,10 @@ const cities = {
   zhejiang: [{
     value: 'hangzhou',
     label: 'Hangzhou',
+  }, {
+    value: 'ningbo',
+    label: 'Ningbo',
+    isLeaf: true
   }],
   jiangsu: [{
     value: 'nanjing',
diff --git a/src/showcase/nz-demo-cascader/nz-demo-cascader-reactive-form.component.ts b/src/showcase/nz-demo-cascader/nz-demo-cascader-reactive-form.component.ts
new file mode 100644
index 00000000000..79a84497410
--- /dev/null
+++ b/src/showcase/nz-demo-cascader/nz-demo-cascader-reactive-form.component.ts
@@ -0,0 +1,84 @@
+import {Component, OnInit} from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+const init_options = [{
+  value: 'zhejiang',
+  label: 'Zhejiang',
+  children: [{
+    value: 'hangzhou',
+    label: 'Hangzhou',
+    children: [{
+      value: 'xihu',
+      label: 'West Lake',
+      isLeaf: true
+    }],
+  }, {
+    value: 'ningbo',
+    label: 'Ningbo',
+    isLeaf: true
+  }],
+}, {
+  value: 'jiangsu',
+  label: 'Jiangsu',
+  children: [{
+    value: 'nanjing',
+    label: 'Nanjing',
+    children: [{
+      value: 'zhonghuamen',
+      label: 'Zhong Hua Men',
+      isLeaf: true
+    }],
+  }],
+}];
+
+@Component({
+  selector: 'nz-demo-cascader-reactive-form',
+  template: `
+    <form [formGroup]="_form" novalidate>
+      <nz-cascader
+        [class.class123]="true"
+        [nzOptions]="_options"
+        (nzChange)="_console($event)"
+        [formControlName]="'name'">
+      </nz-cascader>
+    </form>
+    <br>
+    <button nz-button (click)="_reset()">Reset</button>
+    `,
+  styles  : [
+    `
+
+    `
+  ]
+})
+export class NzDemoCascaderReactiveFormComponent implements OnInit {
+  /** init data */
+  _options = null;
+
+  _value: any[] = null;
+
+  _form: FormGroup;
+
+  _console(value) {
+    console.log(value);
+  }
+
+  constructor(private _fb: FormBuilder) {
+    this._createForm();
+  }
+
+  ngOnInit() {
+    this._options = init_options;
+  }
+
+  _createForm() {
+    this._form = this._fb.group({
+      name: [null, Validators.required ]
+    });
+  }
+
+  _reset(): void {
+    this._form.reset();
+  }
+}
+
diff --git a/src/showcase/nz-demo-cascader/nz-demo-cascader-size.component.ts b/src/showcase/nz-demo-cascader/nz-demo-cascader-size.component.ts
index 53b27f38a9b..4a76d559b58 100644
--- a/src/showcase/nz-demo-cascader/nz-demo-cascader-size.component.ts
+++ b/src/showcase/nz-demo-cascader/nz-demo-cascader-size.component.ts
@@ -11,6 +11,10 @@ const options = [{
       label: 'West Lake',
       isLeaf: true
     }],
+  }, {
+    value: 'ningbo',
+    label: 'Ningbo',
+    isLeaf: true
   }],
 }, {
   value: 'jiangsu',
@@ -33,14 +37,14 @@ const options = [{
     <nz-cascader
       [nzSize]="'large'"
       [nzOptions]="_options"
-      [(ngModel)]="_value"
+      [(ngModel)]="_value1"
       (ngModelChange)="_console($event)"
       (nzChange)="_console($event)">
     </nz-cascader>
     <br><br>
     <nz-cascader
       [nzOptions]="_options"
-      [(ngModel)]="_value"
+      [(ngModel)]="_value2"
       (ngModelChange)="_console($event)"
       (nzChange)="_console($event)">
     </nz-cascader>
@@ -48,7 +52,7 @@ const options = [{
     <nz-cascader
       [nzSize]="'small'"
       [nzOptions]="_options"
-      [(ngModel)]="_value"
+      [(ngModel)]="_value3"
       (ngModelChange)="_console($event)"
       (nzChange)="_console($event)">
     </nz-cascader>
@@ -59,7 +63,9 @@ export class NzDemoCascaderSizeComponent implements OnInit {
   /** init data */
   _options = options;
 
-  _value: any[] = null;
+  _value1: any[] = null;
+  _value2: any[] = null;
+  _value3: any[] = null;
 
   _console(value) {
     console.log(value);
diff --git a/src/showcase/nz-demo-cascader/nz-demo-cascader.component.ts b/src/showcase/nz-demo-cascader/nz-demo-cascader.component.ts
index 7aa1fb6b4aa..9824c9054c7 100644
--- a/src/showcase/nz-demo-cascader/nz-demo-cascader.component.ts
+++ b/src/showcase/nz-demo-cascader/nz-demo-cascader.component.ts
@@ -19,6 +19,7 @@ export class NzDemoCascaderComponent implements OnInit {
   NzDemoCascaderChangeOnSelectCode = require('!!raw-loader!./nz-demo-cascader-change-on-select.component');
   NzDemoCascaderCustomRenderCode = require('!!raw-loader!./nz-demo-cascader-custom-render.component');
   NzDemoCascaderLazyCode = require('!!raw-loader!./nz-demo-cascader-lazy.component');
+  NzDemoCascaderReactiveFormCode = require('!!raw-loader!./nz-demo-cascader-reactive-form.component');
 
   constructor() {
   }
diff --git a/src/showcase/nz-demo-cascader/nz-demo-cascader.html b/src/showcase/nz-demo-cascader/nz-demo-cascader.html
index de976d722e4..47a104cbd33 100644
--- a/src/showcase/nz-demo-cascader/nz-demo-cascader.html
+++ b/src/showcase/nz-demo-cascader/nz-demo-cascader.html
@@ -81,6 +81,13 @@ <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" titl
         </div>
       </nz-code-box>
 
+      <nz-code-box [nzTitle]="'响应式表单'" id="components-cascader-demo-reactive-form" [nzCode]="NzDemoCascaderReactiveFormCode">
+        <nz-demo-cascader-reactive-form demo></nz-demo-cascader-reactive-form>
+        <div intro>
+          <p>创建响应式表单组件，并通过 <code>reset()</code> 方法重置数值。</p>
+        </div>
+      </nz-code-box>
+
     </div>
   </div>
   <section class="markdown api-container">
diff --git a/src/showcase/nz-demo-cascader/nz-demo-cascader.module.ts b/src/showcase/nz-demo-cascader/nz-demo-cascader.module.ts
index 91511802f3d..9fc3d4a4f15 100644
--- a/src/showcase/nz-demo-cascader/nz-demo-cascader.module.ts
+++ b/src/showcase/nz-demo-cascader/nz-demo-cascader.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { NzDemoCascaderBasicComponent } from './nz-demo-cascader-basic.component';
 import { NzDemoCascaderCustomTriggerComponent } from './nz-demo-cascader-custom-trigger.component';
@@ -11,6 +11,7 @@ import { NzDemoCascaderHoverComponent } from './nz-demo-cascader-hover.component
 import { NzDemoCascaderChangeOnSelectComponent } from './nz-demo-cascader-change-on-select.component';
 import { NzDemoCascaderCustomRenderComponent } from './nz-demo-cascader-custom-render.component';
 import { NzDemoCascaderLazyComponent } from './nz-demo-cascader-lazy.component';
+import { NzDemoCascaderReactiveFormComponent } from './nz-demo-cascader-reactive-form.component';
 
 import { NzDemoCascaderComponent } from './nz-demo-cascader.component';
 import { NzCodeBoxModule } from '../share/nz-codebox/nz-codebox.module';
@@ -18,7 +19,7 @@ import { NgZorroAntdModule } from '../../../index.showcase';
 import { NzDemoCascaderRoutingModule } from './nz-demo-cascader.routing.module';
 
 @NgModule({
-  imports     : [ NzDemoCascaderRoutingModule, CommonModule, FormsModule, NzCodeBoxModule, NgZorroAntdModule ],
+  imports     : [ NzDemoCascaderRoutingModule, CommonModule, FormsModule, ReactiveFormsModule, NzCodeBoxModule, NgZorroAntdModule ],
   declarations: [
     NzDemoCascaderComponent,
     NzDemoCascaderBasicComponent,
@@ -29,7 +30,8 @@ import { NzDemoCascaderRoutingModule } from './nz-demo-cascader.routing.module';
     NzDemoCascaderHoverComponent,
     NzDemoCascaderChangeOnSelectComponent,
     NzDemoCascaderCustomRenderComponent,
-    NzDemoCascaderLazyComponent
+    NzDemoCascaderLazyComponent,
+    NzDemoCascaderReactiveFormComponent
   ]
 })