ngrx-forms
Version:
Proper integration of forms in Angular 4 applications using ngrx
78 lines • 10.2 kB
JavaScript
import { Directive, forwardRef, HostListener, Input } from '@angular/core';
import { NGRX_FORM_VIEW_ADAPTER } from './view-adapter';
import * as i0 from "@angular/core";
// tslint:disable:directive-class-suffix
export class NgrxRangeViewAdapter {
constructor(renderer, elementRef) {
this.renderer = renderer;
this.elementRef = elementRef;
this.nativeIdWasSet = false;
this.onChange = () => void 0;
this.onTouched = () => void 0;
}
set ngrxFormControlState(value) {
if (!value) {
throw new Error('The control state must not be undefined!');
}
this.state = value;
const nativeId = this.elementRef.nativeElement.id;
const shouldSetNativeId = value.id !== nativeId && this.nativeIdWasSet;
if (shouldSetNativeId) {
this.renderer.setProperty(this.elementRef.nativeElement, 'id', value.id);
}
}
ngAfterViewInit() {
const nativeId = this.elementRef.nativeElement.id;
const shouldSetNativeId = this.state.id !== nativeId && !nativeId;
if (shouldSetNativeId) {
this.renderer.setProperty(this.elementRef.nativeElement, 'id', this.state.id);
this.nativeIdWasSet = true;
}
}
setViewValue(value) {
this.renderer.setProperty(this.elementRef.nativeElement, 'value', parseFloat(value));
}
setOnChangeCallback(fn) {
this.onChange = fn;
}
setOnTouchedCallback(fn) {
this.onTouched = fn;
}
setIsDisabled(isDisabled) {
this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', isDisabled);
}
handleInput({ target }) {
const value = target.value;
this.onChange(value === '' ? null : parseFloat(value));
}
}
NgrxRangeViewAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgrxRangeViewAdapter, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
NgrxRangeViewAdapter.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: NgrxRangeViewAdapter, selector: "input[type=range][ngrxFormControlState]", inputs: { ngrxFormControlState: "ngrxFormControlState" }, host: { listeners: { "blur": "onTouched()", "change": "handleInput($event)", "input": "handleInput($event)" } }, providers: [{
provide: NGRX_FORM_VIEW_ADAPTER,
useExisting: forwardRef(() => NgrxRangeViewAdapter),
multi: true,
}], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgrxRangeViewAdapter, decorators: [{
type: Directive,
args: [{
// tslint:disable-next-line:directive-selector
selector: 'input[type=range][ngrxFormControlState]',
providers: [{
provide: NGRX_FORM_VIEW_ADAPTER,
useExisting: forwardRef(() => NgrxRangeViewAdapter),
multi: true,
}],
}]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { onTouched: [{
type: HostListener,
args: ['blur']
}], ngrxFormControlState: [{
type: Input
}], handleInput: [{
type: HostListener,
args: ['change', ['$event']]
}, {
type: HostListener,
args: ['input', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFuZ2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvdmlldy1hZGFwdGVyL3JhbmdlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBaUIsU0FBUyxFQUFjLFVBQVUsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFhLE1BQU0sZUFBZSxDQUFDO0FBR2pILE9BQU8sRUFBbUIsc0JBQXNCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7QUFFekUsd0NBQXdDO0FBV3hDLE1BQU0sT0FBTyxvQkFBb0I7SUFzQi9CLFlBQW9CLFFBQW1CLEVBQVUsVUFBc0I7UUFBbkQsYUFBUSxHQUFSLFFBQVEsQ0FBVztRQUFVLGVBQVUsR0FBVixVQUFVLENBQVk7UUFwQi9ELG1CQUFjLEdBQUcsS0FBSyxDQUFDO1FBRS9CLGFBQVEsR0FBeUIsR0FBRyxFQUFFLENBQUMsS0FBSyxDQUFDLENBQUM7UUFHOUMsY0FBUyxHQUFlLEdBQUcsRUFBRSxDQUFDLEtBQUssQ0FBQyxDQUFBO0lBZXVDLENBQUM7SUFiNUUsSUFBYSxvQkFBb0IsQ0FBQyxLQUE0QjtRQUM1RCxJQUFJLENBQUMsS0FBSyxFQUFFO1lBQ1YsTUFBTSxJQUFJLEtBQUssQ0FBQywwQ0FBMEMsQ0FBQyxDQUFDO1NBQzdEO1FBRUQsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7UUFDbkIsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsRUFBRSxDQUFDO1FBQ2xELE1BQU0saUJBQWlCLEdBQUcsS0FBSyxDQUFDLEVBQUUsS0FBSyxRQUFRLElBQUksSUFBSSxDQUFDLGNBQWMsQ0FBQztRQUN2RSxJQUFJLGlCQUFpQixFQUFFO1lBQ3JCLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxFQUFFLElBQUksRUFBRSxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUM7U0FDMUU7SUFDSCxDQUFDO0lBSUQsZUFBZTtRQUNiLE1BQU0sUUFBUSxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLEVBQUUsQ0FBQztRQUNsRCxNQUFNLGlCQUFpQixHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsRUFBRSxLQUFLLFFBQVEsSUFBSSxDQUFDLFFBQVEsQ0FBQztRQUNsRSxJQUFJLGlCQUFpQixFQUFFO1lBQ3JCLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxFQUFFLElBQUksRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQyxDQUFDO1lBQzlFLElBQUksQ0FBQyxjQUFjLEdBQUcsSUFBSSxDQUFDO1NBQzVCO0lBQ0gsQ0FBQztJQUVELFlBQVksQ0FBQyxLQUFVO1FBQ3JCLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxFQUFFLE9BQU8sRUFBRSxVQUFVLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztJQUN2RixDQUFDO0lBRUQsbUJBQW1CLENBQUMsRUFBd0I7UUFDMUMsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVELG9CQUFvQixDQUFDLEVBQWM7UUFDakMsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVELGFBQWEsQ0FBQyxVQUFtQjtRQUMvQixJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsRUFBRSxVQUFVLEVBQUUsVUFBVSxDQUFDLENBQUM7SUFDbkYsQ0FBQztJQUlELFdBQVcsQ0FBQyxFQUFFLE1BQU0sRUFBZ0M7UUFDbEQsTUFBTSxLQUFLLEdBQUcsTUFBTSxDQUFDLEtBQUssQ0FBQztRQUMzQixJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssS0FBSyxFQUFFLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsVUFBVSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUM7SUFDekQsQ0FBQzs7a0hBdERVLG9CQUFvQjtzR0FBcEIsb0JBQW9CLDZPQU5wQixDQUFDO1lBQ1YsT0FBTyxFQUFFLHNCQUFzQjtZQUMvQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLG9CQUFvQixDQUFDO1lBQ25ELEtBQUssRUFBRSxJQUFJO1NBQ1osQ0FBQzs0RkFFUyxvQkFBb0I7a0JBVGhDLFNBQVM7bUJBQUM7b0JBQ1QsOENBQThDO29CQUM5QyxRQUFRLEVBQUUseUNBQXlDO29CQUNuRCxTQUFTLEVBQUUsQ0FBQzs0QkFDVixPQUFPLEVBQUUsc0JBQXNCOzRCQUMvQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxxQkFBcUIsQ0FBQzs0QkFDbkQsS0FBSyxFQUFFLElBQUk7eUJBQ1osQ0FBQztpQkFDSDt5SEFRQyxTQUFTO3NCQURSLFlBQVk7dUJBQUMsTUFBTTtnQkFHUCxvQkFBb0I7c0JBQWhDLEtBQUs7Z0JBMENOLFdBQVc7c0JBRlYsWUFBWTt1QkFBQyxRQUFRLEVBQUUsQ0FBQyxRQUFRLENBQUM7O3NCQUNqQyxZQUFZO3VCQUFDLE9BQU8sRUFBRSxDQUFDLFFBQVEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFmdGVyVmlld0luaXQsIERpcmVjdGl2ZSwgRWxlbWVudFJlZiwgZm9yd2FyZFJlZiwgSG9zdExpc3RlbmVyLCBJbnB1dCwgUmVuZGVyZXIyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5pbXBvcnQgeyBGb3JtQ29udHJvbFN0YXRlIH0gZnJvbSAnLi4vc3RhdGUnO1xyXG5pbXBvcnQgeyBGb3JtVmlld0FkYXB0ZXIsIE5HUlhfRk9STV9WSUVXX0FEQVBURVIgfSBmcm9tICcuL3ZpZXctYWRhcHRlcic7XHJcblxyXG4vLyB0c2xpbnQ6ZGlzYWJsZTpkaXJlY3RpdmUtY2xhc3Mtc3VmZml4XHJcblxyXG5ARGlyZWN0aXZlKHtcclxuICAvLyB0c2xpbnQ6ZGlzYWJsZS1uZXh0LWxpbmU6ZGlyZWN0aXZlLXNlbGVjdG9yXHJcbiAgc2VsZWN0b3I6ICdpbnB1dFt0eXBlPXJhbmdlXVtuZ3J4Rm9ybUNvbnRyb2xTdGF0ZV0nLFxyXG4gIHByb3ZpZGVyczogW3tcclxuICAgIHByb3ZpZGU6IE5HUlhfRk9STV9WSUVXX0FEQVBURVIsXHJcbiAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBOZ3J4UmFuZ2VWaWV3QWRhcHRlciksXHJcbiAgICBtdWx0aTogdHJ1ZSxcclxuICB9XSxcclxufSlcclxuZXhwb3J0IGNsYXNzIE5ncnhSYW5nZVZpZXdBZGFwdGVyIGltcGxlbWVudHMgRm9ybVZpZXdBZGFwdGVyLCBBZnRlclZpZXdJbml0IHtcclxuICBwcml2YXRlIHN0YXRlOiBGb3JtQ29udHJvbFN0YXRlPGFueT47XHJcbiAgcHJpdmF0ZSBuYXRpdmVJZFdhc1NldCA9IGZhbHNlO1xyXG5cclxuICBvbkNoYW5nZTogKHZhbHVlOiBhbnkpID0+IHZvaWQgPSAoKSA9PiB2b2lkIDA7XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ2JsdXInKVxyXG4gIG9uVG91Y2hlZDogKCkgPT4gdm9pZCA9ICgpID0+IHZvaWQgMFxyXG5cclxuICBASW5wdXQoKSBzZXQgbmdyeEZvcm1Db250cm9sU3RhdGUodmFsdWU6IEZvcm1Db250cm9sU3RhdGU8YW55Pikge1xyXG4gICAgaWYgKCF2YWx1ZSkge1xyXG4gICAgICB0aHJvdyBuZXcgRXJyb3IoJ1RoZSBjb250cm9sIHN0YXRlIG11c3Qgbm90IGJlIHVuZGVmaW5lZCEnKTtcclxuICAgIH1cclxuXHJcbiAgICB0aGlzLnN0YXRlID0gdmFsdWU7XHJcbiAgICBjb25zdCBuYXRpdmVJZCA9IHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LmlkO1xyXG4gICAgY29uc3Qgc2hvdWxkU2V0TmF0aXZlSWQgPSB2YWx1ZS5pZCAhPT0gbmF0aXZlSWQgJiYgdGhpcy5uYXRpdmVJZFdhc1NldDtcclxuICAgIGlmIChzaG91bGRTZXROYXRpdmVJZCkge1xyXG4gICAgICB0aGlzLnJlbmRlcmVyLnNldFByb3BlcnR5KHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LCAnaWQnLCB2YWx1ZS5pZCk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjIsIHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZikgeyB9XHJcblxyXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcclxuICAgIGNvbnN0IG5hdGl2ZUlkID0gdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuaWQ7XHJcbiAgICBjb25zdCBzaG91bGRTZXROYXRpdmVJZCA9IHRoaXMuc3RhdGUuaWQgIT09IG5hdGl2ZUlkICYmICFuYXRpdmVJZDtcclxuICAgIGlmIChzaG91bGRTZXROYXRpdmVJZCkge1xyXG4gICAgICB0aGlzLnJlbmRlcmVyLnNldFByb3BlcnR5KHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LCAnaWQnLCB0aGlzLnN0YXRlLmlkKTtcclxuICAgICAgdGhpcy5uYXRpdmVJZFdhc1NldCA9IHRydWU7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBzZXRWaWV3VmFsdWUodmFsdWU6IGFueSk6IHZvaWQge1xyXG4gICAgdGhpcy5yZW5kZXJlci5zZXRQcm9wZXJ0eSh0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudCwgJ3ZhbHVlJywgcGFyc2VGbG9hdCh2YWx1ZSkpO1xyXG4gIH1cclxuXHJcbiAgc2V0T25DaGFuZ2VDYWxsYmFjayhmbjogKHZhbHVlOiBhbnkpID0+IHZvaWQpOiB2b2lkIHtcclxuICAgIHRoaXMub25DaGFuZ2UgPSBmbjtcclxuICB9XHJcblxyXG4gIHNldE9uVG91Y2hlZENhbGxiYWNrKGZuOiAoKSA9PiB2b2lkKTogdm9pZCB7XHJcbiAgICB0aGlzLm9uVG91Y2hlZCA9IGZuO1xyXG4gIH1cclxuXHJcbiAgc2V0SXNEaXNhYmxlZChpc0Rpc2FibGVkOiBib29sZWFuKTogdm9pZCB7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFByb3BlcnR5KHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LCAnZGlzYWJsZWQnLCBpc0Rpc2FibGVkKTtcclxuICB9XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ2NoYW5nZScsIFsnJGV2ZW50J10pXHJcbiAgQEhvc3RMaXN0ZW5lcignaW5wdXQnLCBbJyRldmVudCddKVxyXG4gIGhhbmRsZUlucHV0KHsgdGFyZ2V0IH06IHsgdGFyZ2V0OiBIVE1MSW5wdXRFbGVtZW50IH0pOiB2b2lkIHtcclxuICAgIGNvbnN0IHZhbHVlID0gdGFyZ2V0LnZhbHVlO1xyXG4gICAgdGhpcy5vbkNoYW5nZSh2YWx1ZSA9PT0gJycgPyBudWxsIDogcGFyc2VGbG9hdCh2YWx1ZSkpO1xyXG4gIH1cclxufVxyXG4iXX0=