fix(module:cascader): select and render leaf label & reset in reactive form (#335) (#336)

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') {

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',

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',

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',

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',

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',

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',

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',

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',

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();
+  }
+}
+

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,22 +37,22 @@ 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>
     <br><br>
     <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);

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() {
   }

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

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,14 +11,15 @@ 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';
 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
   ]
 })