Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Feb 28, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions components/slider/demo/basic.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 ];
}
19 changes: 4 additions & 15 deletions components/slider/demo/event.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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}`);
Expand Down
4 changes: 2 additions & 2 deletions components/slider/demo/mark.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.


12 changes: 6 additions & 6 deletions components/slider/demo/mark.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`,
Expand Down
6 changes: 3 additions & 3 deletions components/slider/demo/vertical.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`
Expand Down
1 change: 0 additions & 1 deletion components/slider/doc/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -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` |
Expand Down
1 change: 0 additions & 1 deletion components/slider/doc/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -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` |
Expand Down
2 changes: 1 addition & 1 deletion components/slider/nz-slider-error.ts
Original file line number Diff line number Diff line change
@@ -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".`);
}
5 changes: 3 additions & 2 deletions components/slider/nz-slider.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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;
Expand Down