fix(module:slider): fix defaultValue check error (#2986)

* fix(module:slider): fix defaultValue check error * docs(module:slider): change nzValue to ngModel
NG-ZORRO · Feb 28, 2019 · c3649bc · c3649bc
1 parent 2530685
commit c3649bc
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 36 deletions.
diff --git a/components/slider/demo/basic.ts b/components/slider/demo/basic.ts
@@ -3,13 +3,14 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-slider-basic',
   template: `
-    <nz-slider [nzDefaultValue]="30" [nzDisabled]="disabled"></nz-slider>
-    <nz-slider nzRange [nzDefaultValue]="[20, 50]" [nzDisabled]="disabled"></nz-slider>
-    Disabled: <nz-switch nzSize="small" [(ngModel)]="disabled"></nz-switch>
+    <nz-slider [(ngModel)]="value1" [nzDisabled]="disabled"></nz-slider>
+    <nz-slider nzRange [(ngModel)]="value2" [nzDisabled]="disabled"></nz-slider>
+    Disabled:
+    <nz-switch nzSize="small" [(ngModel)]="disabled"></nz-switch>
   `
 })
 export class NzDemoSliderBasicComponent {
-
   disabled = false;
-
+  value1 = 30;
+  value2 = [ 20, 50 ];
 }
diff --git a/components/slider/demo/event.ts b/components/slider/demo/event.ts
@@ -3,24 +3,13 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-slider-event',
   template: `
-    <nz-slider
-      [nzDefaultValue]="30"
-      [(ngModel)]="singleValue" (ngModelChange)="onChange($event)"
-      (nzOnAfterChange)="onAfterChange($event)"
-    ></nz-slider>
-    <nz-slider
-      nzRange
-      [nzStep]="10"
-      [nzDefaultValue]="[20, 50]"
-      [(ngModel)]="rangeValue" (ngModelChange)="onChange($event)"
-      (nzOnAfterChange)="onAfterChange($event)"
-    ></nz-slider>
+    <nz-slider [(ngModel)]="singleValue" (ngModelChange)="onChange($event)" (nzOnAfterChange)="onAfterChange($event)"></nz-slider>
+    <nz-slider nzRange [nzStep]="10" [(ngModel)]="rangeValue" (ngModelChange)="onChange($event)" (nzOnAfterChange)="onAfterChange($event)"></nz-slider>
   `
 })
 export class NzDemoSliderEventComponent {
-
-  singleValue;
-  rangeValue;
+  singleValue = 30;
+  rangeValue = [ 20, 50 ];
 
   onChange(value) {
     console.log(`onChange: ${value}`);

diff --git a/components/slider/demo/mark.md b/components/slider/demo/mark.md
@@ -7,10 +7,10 @@ title:
 
 ## zh-CN
 
-使用 `nzMarks` 属性标注分段式滑块，使用 `nzValue` / `nzDefaultValue` 指定滑块位置。当 `nzIncluded = false` 时，表明不同标记间为并列关系。当 `nzStep = null` 时，Slider 的可选值仅有 `nzMarks` 标出来的部分。
+使用 `nzMarks` 属性标注分段式滑块，使用 `ngModel` 指定滑块位置。当 `nzIncluded = false` 时，表明不同标记间为并列关系。当 `nzStep = null` 时，Slider 的可选值仅有 `nzMarks` 标出来的部分。
 
 ## en-US
 
-Using `nzMarks` property to mark a graduated slider, use `nzValue` or `nzDefaultValue` to specify the position of thumb. When `nzIncluded` is false, means that different thumbs are coordinated. When `nzStep` is null, users can only slide the thumbs onto marks.
+Using `nzMarks` property to mark a graduated slider, use `ngModel` to specify the position of thumb. When `nzIncluded` is false, means that different thumbs are coordinated. When `nzStep` is null, users can only slide the thumbs onto marks.
 
 
diff --git a/components/slider/demo/mark.ts b/components/slider/demo/mark.ts
@@ -5,15 +5,15 @@ import { Component } from '@angular/core';
   template: `
     <div>
       <h4>included=true</h4>
-      <nz-slider [nzMarks]="marks" [nzDefaultValue]="37"></nz-slider>
-      <nz-slider [nzMarks]="marks" nzIncluded nzRange [nzDefaultValue]="[26, 37]"></nz-slider>
+      <nz-slider [nzMarks]="marks" [ngModel]="37"></nz-slider>
+      <nz-slider [nzMarks]="marks" nzIncluded nzRange [ngModel]="[26, 37]"></nz-slider>
       <h4>included=false</h4>
-      <nz-slider [nzMarks]="marks" [nzIncluded]="false" [nzDefaultValue]="37"></nz-slider>
+      <nz-slider [nzMarks]="marks" [nzIncluded]="false" [ngModel]="37"></nz-slider>
       <h4>marks & step</h4>
-      <nz-slider [nzMarks]="marks" [nzStep]="10" [nzDefaultValue]="37"></nz-slider>
+      <nz-slider [nzMarks]="marks" [nzStep]="10" [ngModel]="37"></nz-slider>
       <h4>step=null || dots=true</h4>
-      <nz-slider [nzMarks]="marks" [nzStep]="null" [nzDefaultValue]="37"></nz-slider>
-      <nz-slider [nzMarks]="marks" nzDots [nzDefaultValue]="37"></nz-slider>
+      <nz-slider [nzMarks]="marks" [nzStep]="null" [ngModel]="37"></nz-slider>
+      <nz-slider [nzMarks]="marks" nzDots [ngModel]="37"></nz-slider>
       Change nzMarks dynamically: <button nz-button (click)="changeMarks()">Change nzMarks</button>
     </div>
   `,

diff --git a/components/slider/demo/vertical.ts b/components/slider/demo/vertical.ts
@@ -5,13 +5,13 @@ import { Component } from '@angular/core';
   template: `
     <div [ngStyle]="{ height: '300px' }">
       <div [ngStyle]="style">
-        <nz-slider nzVertical [nzDefaultValue]="30"></nz-slider>
+        <nz-slider nzVertical [ngModel]="30"></nz-slider>
       </div>
       <div [ngStyle]="style">
-        <nz-slider nzVertical nzRange [nzStep]="10" [nzDefaultValue]="[20, 50]"></nz-slider>
+        <nz-slider nzVertical nzRange [nzStep]="10" [ngModel]="[20, 50]"></nz-slider>
       </div>
       <div [ngStyle]="style">
-        <nz-slider nzVertical nzRange [nzMarks]="marks" [nzDefaultValue]="[26, 37]"></nz-slider>
+        <nz-slider nzVertical nzRange [nzMarks]="marks" [ngModel]="[26, 37]"></nz-slider>
       </div>
     </div>
   `

diff --git a/components/slider/doc/index.en-US.md b/components/slider/doc/index.en-US.md
@@ -16,7 +16,6 @@ To input a value in a range.
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| `[nzDefaultValue]` | The default value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | `number｜number[]` | `0｜[0, 0]` |
 | `[nzDisabled]` | If true, the slider will not be interactable. | `boolean` | `false` |
 | `[nzDots]` | Whether the thumb can drag over tick only. | `boolean` | `false` |
 | `[nzIncluded]` | Make effect when `marks` not null，`true` means containment and `false` means coordinative | `boolean` | `true` |

diff --git a/components/slider/doc/index.zh-CN.md b/components/slider/doc/index.zh-CN.md
@@ -17,7 +17,6 @@ title: Slider
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| `[nzDefaultValue]` | 设置初始取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | `number｜number[]` | `0｜[0, 0]` |
 | `[nzDisabled]` | 值为 `true` 时，滑块为禁用状态 | `boolean` | `false` |
 | `[nzDots]` | 是否只能拖拽到刻度上 | `boolean` | `false` |
 | `[nzIncluded]` | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | `boolean` | `true` |

diff --git a/components/slider/nz-slider-error.ts b/components/slider/nz-slider-error.ts
@@ -1,3 +1,3 @@
 export function getValueTypeNotMatchError(): Error {
-  return new Error(`The "nzRange" can't match the "nzValue"'s type, please check these properties: "nzRange", "nzValue", "nzDefaultValue".`);
+  return new Error(`The "nzRange" can't match the "ngModel"'s type, please check these properties: "nzRange", "ngModel", "nzDefaultValue".`);
 }
diff --git a/components/slider/nz-slider.component.ts b/components/slider/nz-slider.component.ts
@@ -47,14 +47,16 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange
   @Input() @InputBoolean() nzIncluded: boolean = true;
   @Input() @InputBoolean() nzRange: boolean = false;
   @Input() @InputBoolean() nzVertical: boolean = false;
-  @Input() nzDefaultValue: SliderValue = null;
   @Input() nzMarks: Marks = null;
   @Input() nzMax = 100;
   @Input() nzMin = 0;
   @Input() nzStep = 1;
   @Input() nzTooltipVisible: SliderShowTooltip = 'default';
   @Input() nzTipFormatter: (value: number) => string;
 
+  /** @deprecated 8.0.0, This API is redundant for Angular. */
+  @Input() nzDefaultValue: SliderValue = null;
+
   @Output() readonly nzOnAfterChange = new EventEmitter<SliderValue>();
 
   value: SliderValue = null; // CORE value state
@@ -78,7 +80,6 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange
   constructor(private cdr: ChangeDetectorRef) {}
 
   ngOnInit(): void {
-    this.assertValueTypeMatch(this.nzDefaultValue);
     this.handles = this.generateHandles(this.nzRange ? 2 : 1);
     this.sliderDOM = this.slider.nativeElement;
     this.marksArray = this.nzMarks ? this.generateMarkItems(this.nzMarks) : null;