ngrx-forms
Version:
Proper integration of forms in Angular 4 applications using ngrx
80 lines • 10.7 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 NgrxNumberViewAdapter {
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) {
// The value needs to be normalized for IE9, otherwise it is set to 'null' when null
const normalizedValue = value === null ? '' : value;
this.renderer.setProperty(this.elementRef.nativeElement, 'value', normalizedValue);
}
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));
}
}
NgrxNumberViewAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgrxNumberViewAdapter, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
NgrxNumberViewAdapter.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: NgrxNumberViewAdapter, selector: "input[type=number][ngrxFormControlState]", inputs: { ngrxFormControlState: "ngrxFormControlState" }, host: { listeners: { "blur": "onTouched()", "change": "handleInput($event)", "input": "handleInput($event)" } }, providers: [{
provide: NGRX_FORM_VIEW_ADAPTER,
useExisting: forwardRef(() => NgrxNumberViewAdapter),
multi: true,
}], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgrxNumberViewAdapter, decorators: [{
type: Directive,
args: [{
// tslint:disable-next-line:directive-selector
selector: 'input[type=number][ngrxFormControlState]',
providers: [{
provide: NGRX_FORM_VIEW_ADAPTER,
useExisting: forwardRef(() => NgrxNumberViewAdapter),
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibnVtYmVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL3ZpZXctYWRhcHRlci9udW1iZXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFpQixTQUFTLEVBQWMsVUFBVSxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQWEsTUFBTSxlQUFlLENBQUM7QUFHakgsT0FBTyxFQUFtQixzQkFBc0IsRUFBRSxNQUFNLGdCQUFnQixDQUFDOztBQUV6RSx3Q0FBd0M7QUFXeEMsTUFBTSxPQUFPLHFCQUFxQjtJQXNCaEMsWUFBb0IsUUFBbUIsRUFBVSxVQUFzQjtRQUFuRCxhQUFRLEdBQVIsUUFBUSxDQUFXO1FBQVUsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQXBCL0QsbUJBQWMsR0FBRyxLQUFLLENBQUM7UUFFL0IsYUFBUSxHQUF5QixHQUFHLEVBQUUsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUc5QyxjQUFTLEdBQWUsR0FBRyxFQUFFLENBQUMsS0FBSyxDQUFDLENBQUE7SUFldUMsQ0FBQztJQWI1RSxJQUFhLG9CQUFvQixDQUFDLEtBQTRCO1FBQzVELElBQUksQ0FBQyxLQUFLLEVBQUU7WUFDVixNQUFNLElBQUksS0FBSyxDQUFDLDBDQUEwQyxDQUFDLENBQUM7U0FDN0Q7UUFFRCxJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQztRQUNuQixNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxFQUFFLENBQUM7UUFDbEQsTUFBTSxpQkFBaUIsR0FBRyxLQUFLLENBQUMsRUFBRSxLQUFLLFFBQVEsSUFBSSxJQUFJLENBQUMsY0FBYyxDQUFDO1FBQ3ZFLElBQUksaUJBQWlCLEVBQUU7WUFDckIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLEVBQUUsSUFBSSxFQUFFLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQztTQUMxRTtJQUNILENBQUM7SUFJRCxlQUFlO1FBQ2IsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsRUFBRSxDQUFDO1FBQ2xELE1BQU0saUJBQWlCLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxFQUFFLEtBQUssUUFBUSxJQUFJLENBQUMsUUFBUSxDQUFDO1FBQ2xFLElBQUksaUJBQWlCLEVBQUU7WUFDckIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLEVBQUUsSUFBSSxFQUFFLElBQUksQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUM7WUFDOUUsSUFBSSxDQUFDLGNBQWMsR0FBRyxJQUFJLENBQUM7U0FDNUI7SUFDSCxDQUFDO0lBRUQsWUFBWSxDQUFDLEtBQVU7UUFDckIsb0ZBQW9GO1FBQ3BGLE1BQU0sZUFBZSxHQUFHLEtBQUssS0FBSyxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDO1FBQ3BELElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxFQUFFLE9BQU8sRUFBRSxlQUFlLENBQUMsQ0FBQztJQUNyRixDQUFDO0lBRUQsbUJBQW1CLENBQUMsRUFBd0I7UUFDMUMsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVELG9CQUFvQixDQUFDLEVBQWM7UUFDakMsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVELGFBQWEsQ0FBQyxVQUFtQjtRQUMvQixJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsRUFBRSxVQUFVLEVBQUUsVUFBVSxDQUFDLENBQUM7SUFDbkYsQ0FBQztJQUlELFdBQVcsQ0FBQyxFQUFFLE1BQU0sRUFBZ0M7UUFDbEQsTUFBTSxLQUFLLEdBQUcsTUFBTSxDQUFDLEtBQUssQ0FBQztRQUMzQixJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssS0FBSyxFQUFFLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsVUFBVSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUM7SUFDekQsQ0FBQzs7bUhBeERVLHFCQUFxQjt1R0FBckIscUJBQXFCLDhPQU5yQixDQUFDO1lBQ1YsT0FBTyxFQUFFLHNCQUFzQjtZQUMvQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLHFCQUFxQixDQUFDO1lBQ3BELEtBQUssRUFBRSxJQUFJO1NBQ1osQ0FBQzs0RkFFUyxxQkFBcUI7a0JBVGpDLFNBQVM7bUJBQUM7b0JBQ1QsOENBQThDO29CQUM5QyxRQUFRLEVBQUUsMENBQTBDO29CQUNwRCxTQUFTLEVBQUUsQ0FBQzs0QkFDVixPQUFPLEVBQUUsc0JBQXNCOzRCQUMvQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxzQkFBc0IsQ0FBQzs0QkFDcEQsS0FBSyxFQUFFLElBQUk7eUJBQ1osQ0FBQztpQkFDSDt5SEFRQyxTQUFTO3NCQURSLFlBQVk7dUJBQUMsTUFBTTtnQkFHUCxvQkFBb0I7c0JBQWhDLEtBQUs7Z0JBNENOLFdBQVc7c0JBRlYsWUFBWTt1QkFBQyxRQUFRLEVBQUUsQ0FBQyxRQUFRLENBQUM7O3NCQUNqQyxZQUFZO3VCQUFDLE9BQU8sRUFBRSxDQUFDLFFBQVEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFmdGVyVmlld0luaXQsIERpcmVjdGl2ZSwgRWxlbWVudFJlZiwgZm9yd2FyZFJlZiwgSG9zdExpc3RlbmVyLCBJbnB1dCwgUmVuZGVyZXIyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5pbXBvcnQgeyBGb3JtQ29udHJvbFN0YXRlIH0gZnJvbSAnLi4vc3RhdGUnO1xyXG5pbXBvcnQgeyBGb3JtVmlld0FkYXB0ZXIsIE5HUlhfRk9STV9WSUVXX0FEQVBURVIgfSBmcm9tICcuL3ZpZXctYWRhcHRlcic7XHJcblxyXG4vLyB0c2xpbnQ6ZGlzYWJsZTpkaXJlY3RpdmUtY2xhc3Mtc3VmZml4XHJcblxyXG5ARGlyZWN0aXZlKHtcclxuICAvLyB0c2xpbnQ6ZGlzYWJsZS1uZXh0LWxpbmU6ZGlyZWN0aXZlLXNlbGVjdG9yXHJcbiAgc2VsZWN0b3I6ICdpbnB1dFt0eXBlPW51bWJlcl1bbmdyeEZvcm1Db250cm9sU3RhdGVdJyxcclxuICBwcm92aWRlcnM6IFt7XHJcbiAgICBwcm92aWRlOiBOR1JYX0ZPUk1fVklFV19BREFQVEVSLFxyXG4gICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gTmdyeE51bWJlclZpZXdBZGFwdGVyKSxcclxuICAgIG11bHRpOiB0cnVlLFxyXG4gIH1dLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgTmdyeE51bWJlclZpZXdBZGFwdGVyIGltcGxlbWVudHMgRm9ybVZpZXdBZGFwdGVyLCBBZnRlclZpZXdJbml0IHtcclxuICBwcml2YXRlIHN0YXRlOiBGb3JtQ29udHJvbFN0YXRlPGFueT47XHJcbiAgcHJpdmF0ZSBuYXRpdmVJZFdhc1NldCA9IGZhbHNlO1xyXG5cclxuICBvbkNoYW5nZTogKHZhbHVlOiBhbnkpID0+IHZvaWQgPSAoKSA9PiB2b2lkIDA7XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ2JsdXInKVxyXG4gIG9uVG91Y2hlZDogKCkgPT4gdm9pZCA9ICgpID0+IHZvaWQgMFxyXG5cclxuICBASW5wdXQoKSBzZXQgbmdyeEZvcm1Db250cm9sU3RhdGUodmFsdWU6IEZvcm1Db250cm9sU3RhdGU8YW55Pikge1xyXG4gICAgaWYgKCF2YWx1ZSkge1xyXG4gICAgICB0aHJvdyBuZXcgRXJyb3IoJ1RoZSBjb250cm9sIHN0YXRlIG11c3Qgbm90IGJlIHVuZGVmaW5lZCEnKTtcclxuICAgIH1cclxuXHJcbiAgICB0aGlzLnN0YXRlID0gdmFsdWU7XHJcbiAgICBjb25zdCBuYXRpdmVJZCA9IHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LmlkO1xyXG4gICAgY29uc3Qgc2hvdWxkU2V0TmF0aXZlSWQgPSB2YWx1ZS5pZCAhPT0gbmF0aXZlSWQgJiYgdGhpcy5uYXRpdmVJZFdhc1NldDtcclxuICAgIGlmIChzaG91bGRTZXROYXRpdmVJZCkge1xyXG4gICAgICB0aGlzLnJlbmRlcmVyLnNldFByb3BlcnR5KHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LCAnaWQnLCB2YWx1ZS5pZCk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjIsIHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZikgeyB9XHJcblxyXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcclxuICAgIGNvbnN0IG5hdGl2ZUlkID0gdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuaWQ7XHJcbiAgICBjb25zdCBzaG91bGRTZXROYXRpdmVJZCA9IHRoaXMuc3RhdGUuaWQgIT09IG5hdGl2ZUlkICYmICFuYXRpdmVJZDtcclxuICAgIGlmIChzaG91bGRTZXROYXRpdmVJZCkge1xyXG4gICAgICB0aGlzLnJlbmRlcmVyLnNldFByb3BlcnR5KHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LCAnaWQnLCB0aGlzLnN0YXRlLmlkKTtcclxuICAgICAgdGhpcy5uYXRpdmVJZFdhc1NldCA9IHRydWU7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBzZXRWaWV3VmFsdWUodmFsdWU6IGFueSk6IHZvaWQge1xyXG4gICAgLy8gVGhlIHZhbHVlIG5lZWRzIHRvIGJlIG5vcm1hbGl6ZWQgZm9yIElFOSwgb3RoZXJ3aXNlIGl0IGlzIHNldCB0byAnbnVsbCcgd2hlbiBudWxsXHJcbiAgICBjb25zdCBub3JtYWxpemVkVmFsdWUgPSB2YWx1ZSA9PT0gbnVsbCA/ICcnIDogdmFsdWU7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFByb3BlcnR5KHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LCAndmFsdWUnLCBub3JtYWxpemVkVmFsdWUpO1xyXG4gIH1cclxuXHJcbiAgc2V0T25DaGFuZ2VDYWxsYmFjayhmbjogKHZhbHVlOiBhbnkpID0+IHZvaWQpOiB2b2lkIHtcclxuICAgIHRoaXMub25DaGFuZ2UgPSBmbjtcclxuICB9XHJcblxyXG4gIHNldE9uVG91Y2hlZENhbGxiYWNrKGZuOiAoKSA9PiB2b2lkKTogdm9pZCB7XHJcbiAgICB0aGlzLm9uVG91Y2hlZCA9IGZuO1xyXG4gIH1cclxuXHJcbiAgc2V0SXNEaXNhYmxlZChpc0Rpc2FibGVkOiBib29sZWFuKTogdm9pZCB7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFByb3BlcnR5KHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LCAnZGlzYWJsZWQnLCBpc0Rpc2FibGVkKTtcclxuICB9XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ2NoYW5nZScsIFsnJGV2ZW50J10pXHJcbiAgQEhvc3RMaXN0ZW5lcignaW5wdXQnLCBbJyRldmVudCddKVxyXG4gIGhhbmRsZUlucHV0KHsgdGFyZ2V0IH06IHsgdGFyZ2V0OiBIVE1MSW5wdXRFbGVtZW50IH0pOiB2b2lkIHtcclxuICAgIGNvbnN0IHZhbHVlID0gdGFyZ2V0LnZhbHVlO1xyXG4gICAgdGhpcy5vbkNoYW5nZSh2YWx1ZSA9PT0gJycgPyBudWxsIDogcGFyc2VGbG9hdCh2YWx1ZSkpO1xyXG4gIH1cclxufVxyXG4iXX0=