feat(module: slider): slider add ngModel (#202)

components/slider/demo/basic.ts

@@ -5,6 +5,19 @@ import { Component, OnInit } from '@angular/core';
   template: `
     <div class="am-demo-page">
       <div style="padding: 15px;font-size: 16px;">步骤条</div>
+      <div class="am-demo-bd am-wingblank am-wingblank-lg">
+          <div>
+            <div class="sub-title">Small size ngModel</div>
+          </div>
+          <div>
+            <Slider [ngModel]="value"
+                    [min]=-10
+                    [max]=100
+                    (ngModelChange)="change($event)"
+                    (onAfterChange)="afterChange($event)"
+            ></Slider>
+          </div>
+      </div>
       <div class="am-demo-bd am-wingblank am-wingblank-lg">
           <div>
             <div class="sub-title">Small size</div>

components/slider/doc/index.en-US.md

@@ -15,6 +15,8 @@ A Slider component for selecting particular value in range, eg: controls the dis
 
 Properties | Descrition | Type | Default
 -----------|------------|------|--------
+| ngModel|  Number  |     | The value of slider, double binding. |
+| ngModelChange |  Function     | Noop    | Callback function that is called when the user changes the slider's value. |
 | min    |  Number     | 0     | The minimum value the slider can slide to. |
 | max    |  Number     | 100    | The maximum value the slider can slide to. |
 | step    |  Number or null     | 1    | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be `null`. |

components/slider/doc/index.zh-CN.md

@@ -18,6 +18,8 @@ subtitle: 滑动输入条
 
 属性 | 类型 | 默认值 | 说明
 ----|-----|------|------
+| ngModel|  Number  |     | 设置当前取值，可双向绑定。 |
+| ngModelChange |  Function     | Noop    | 当 Slider 的值发生改变时，会触发 ngModelChange 事件，并把改变后的值作为参数传入。 |
 | min    |  Number     | 0     | 最小值 |
 | max    |  Number     | 100    | 最大值 |
 | step    |  Number or null     | 1    | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。 |

components/slider/slider-handle/slider-handle.component.ts

@@ -135,7 +135,7 @@ export class SliderHandle implements OnInit, OnDestroy {
       document.addEventListener('mouseup', this.mouseUp, false);
       this.pauseEvent(event);
     }
-  };
+  }
 
   mouseMove = event => {
     if (!this._disabled && this._isDraging) {
@@ -148,7 +148,7 @@ export class SliderHandle implements OnInit, OnDestroy {
         this.onChange.emit(this._value);
       }
     }
-  };
+  }
 
   mouseUp = event => {
     if (!this._disabled && this._isDraging) {
@@ -159,7 +159,7 @@ export class SliderHandle implements OnInit, OnDestroy {
       this.left = this.calcOffset(this._value);
       this.onAfterChange.emit(this._value);
     }
-  };
+  }
 
   calcValueByPos(pos) {
     const offset = pos - this._sliderStart;
@@ -240,7 +240,6 @@ export class SliderHandle implements OnInit, OnDestroy {
     this.left = this.calcOffset(this._value);
     this._minBound = this._minBound === undefined ? this._min : this._minBound;
     this._maxBound = this._maxBound === undefined ? this._max : this._maxBound;
-    this.onAfterChange.emit(this._value);
   }
 
   ngOnDestroy() {

components/slider/slider.component.spec.ts

@@ -1,4 +1,5 @@
 import { OnInit, Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { SliderModule } from './slider.module';
@@ -8,6 +9,7 @@ describe('SliderComponent', () => {
   let component: TestSliderComponent;
   let fixture: ComponentFixture<TestSliderComponent>;
   let sliderEle;
+  let sliderEles;
   let amSlider;
   let sliderHandler;
   let sliderSteps;
@@ -16,14 +18,15 @@ describe('SliderComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [TestSliderComponent],
-      imports: [SliderModule]
+      imports: [SliderModule, FormsModule]
     }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TestSliderComponent);
     component = fixture.componentInstance;
     sliderEle = fixture.debugElement.query(By.css('Slider'));
+    sliderEles = fixture.debugElement.queryAll(By.css('Slider'));
     amSlider = sliderEle.nativeElement.querySelector('.am-slider');
     sliderHandler = sliderEle.nativeElement.querySelector('.am-slider-handle');
     sliderSteps = sliderEle.nativeElement.querySelector('.am-slider-step');
@@ -105,6 +108,24 @@ describe('SliderComponent', () => {
     expect(component.change).toHaveBeenCalled();
     expect(component.afterChange).toHaveBeenCalled();
   });
+  it('should ngModel work', () => {
+    amSlider = sliderEles[1].nativeElement.querySelector('.am-slider');
+    sliderHandler = sliderEles[1].nativeElement.querySelector('.am-slider-handle');
+    sliderSteps = sliderEles[1].nativeElement.querySelector('.am-slider-step');
+    const sliderCoords = amSlider.getBoundingClientRect();
+    const sliderLength = sliderCoords.width;
+    const sliderStart = sliderCoords.left;
+    const offset = Math.round(((230 - sliderStart) / sliderLength) * 100);
+
+    const sliderHandlerNode = sliderEles[1].nativeElement.querySelector('sliderhandle');
+    dispatchTouchEvent(sliderHandlerNode, 'touchstart');
+    fixture.detectChanges();
+    dispatchTouchEvent(sliderHandlerNode, 'touchmove', 230);
+    fixture.detectChanges();
+    dispatchTouchEvent(sliderHandlerNode, 'touchend');
+    expect(sliderHandler.getAttribute('style')).toContain('left: ' + offset + '%');
+    expect(component.modelChange).toHaveBeenCalled();
+  });
 });
 
 @Component({
@@ -125,6 +146,20 @@ describe('SliderComponent', () => {
           (onChange)="change($event)"
           (onAfterChange)="afterChange($event)"
   ></Slider>
+  <Slider [min]= "min"
+          [max]="max"
+          [dots]="dots"
+          [step]="step"
+          [marks]="marks"
+          [(ngModel)]="value"
+          [disabled]="disabled"
+          [included]="included"
+          [railStyle]="railStyle"
+          [trackStyle]="trackStyle"
+          [handleStyle]="handleStyle"
+          (ngModelChange)="modelChange($event)"
+          (onAfterChange)="afterChange($event)"
+  ></Slider>
  `
 })
 export class TestSliderComponent implements OnInit {
@@ -143,7 +178,7 @@ export class TestSliderComponent implements OnInit {
 
   afterChange = jasmine.createSpy('afterChange callback');
   change = jasmine.createSpy('change callback');
-
+  modelChange = jasmine.createSpy('ngModelChange callback');
   constructor() {}
 
   ngOnInit() {

components/slider/slider.component.ts

@@ -6,15 +6,24 @@ import {
   EventEmitter,
   ElementRef,
   ViewEncapsulation,
-  HostBinding
+  HostBinding,
+  forwardRef
 } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 @Component({
   selector: 'Slider , nzm-slider',
   templateUrl: './slider.component.html',
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => Slider),
+      multi: true
+    }
+  ]
 })
-export class Slider implements OnInit {
+export class Slider implements OnInit, ControlValueAccessor {
   prefixCls = 'am-slider';
   sliderLength: number;
   sliderStart: number;
@@ -25,8 +34,8 @@ export class Slider implements OnInit {
   private _min: number = 0;
   private _max: number = 100;
   private _step: number = 1;
-  private _value: number = 10;
-  private _defaultValue: number;
+  private _value: number;
+  private _defaultValue: number = 0;
   private _disabled: boolean = false;
   private _marks: object = {};
   private _dots: boolean = false;
@@ -61,13 +70,12 @@ export class Slider implements OnInit {
     return this._value;
   }
   set value(value: number) {
-    this._value = value;
-    this.valueRange();
+    this.setValue(value);
   }
   @Input()
   set defaultValue(value) {
     this._defaultValue = value;
-    this._value = this._defaultValue;
+    this.setValue(value);
   }
   @Input()
   get disabled(): boolean {
@@ -119,14 +127,18 @@ export class Slider implements OnInit {
   set railStyle(value: object) {
     this._railStyle = value;
   }
-  @Output()
-  onChange = new EventEmitter<any>();
+
   @Output()
   onAfterChange = new EventEmitter<any>();
+  @Output()
+  onChange = new EventEmitter<any>();
 
   @HostBinding('class.am-slider-wrapper')
   amSliderWrapper: boolean = true;
 
+  private _ngModelOnChange: (value: number) => void = () => {};
+  private _ngModelOnTouched: (value: number) => void = () => {};
+
   constructor(private _elf: ElementRef) {}
 
   setCls() {
@@ -137,17 +149,16 @@ export class Slider implements OnInit {
 
   handleChange(e) {
     setTimeout(() => {
-      this.offset = 0;
-      this.length = ((e - this._min) * 100) / (this._max - this._min);
+      this.setTrack(e);
       this._value = e;
     }, 10);
     this.onChange.emit(e);
+    this._ngModelOnChange(e);
   }
 
   handleAfterChange(e) {
     setTimeout(() => {
-      this.offset = 0;
-      this.length = ((e - this._min) * 100) / (this._max - this._min);
+      this.setTrack(e);
       this._value = e;
     }, 10);
     this.onAfterChange.emit(e);
@@ -164,9 +175,41 @@ export class Slider implements OnInit {
 
   ngOnInit() {
     this.setCls();
-    this.valueRange();
+    this.setValue(this._value);
     const sliderCoords = this._elf.nativeElement.getElementsByClassName('am-slider')[0].getBoundingClientRect();
     this.sliderLength = sliderCoords.width;
     this.sliderStart = sliderCoords.left;
   }
+
+  writeValue(value: number): void {
+    this.setValue(value, true);
+  }
+
+  setValue(value: number, isWriteValue = false) {
+    if (value === 0 || value) {
+      this._value = value;
+    } else {
+      this._value = this._defaultValue;
+    }
+    this.valueRange();
+    this.setTrack(this._value);
+    if (isWriteValue) {
+      this._ngModelOnChange(this._value);
+    } else {
+      this.onAfterChange.emit(this._value);
+    }
+  }
+
+  setTrack(e) {
+    this.offset = 0;
+    this.length = ((e - this._min) * 100) / (this._max - this._min);
+  }
+
+  registerOnChange(fn: (value: number) => void): void {
+    this._ngModelOnChange = fn;
+  }
+
+  registerOnTouched(fn: (value: number) => void): void {
+    this._ngModelOnTouched = fn;
+  }
 }