ngrx-forms
Version:
Proper integration of forms in Angular 4 applications using ngrx
85 lines • 11 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 NgrxRadioViewAdapter {
constructor(renderer, elementRef) {
this.renderer = renderer;
this.elementRef = elementRef;
this.nativeNameWasSet = false;
this.onChange = () => void 0;
this.onTouched = () => void 0;
}
set value(val) {
if (val !== this.latestValue) {
this.latestValue = val;
if (this.isChecked) {
this.onChange();
}
}
}
set ngrxFormControlState(value) {
if (!value) {
throw new Error('The control state must not be undefined!');
}
this.state = value;
const nativeName = this.elementRef.nativeElement.name;
const shouldSetNativeName = value.id !== nativeName && this.nativeNameWasSet;
if (shouldSetNativeName) {
this.renderer.setProperty(this.elementRef.nativeElement, 'name', value.id);
}
}
ngOnInit() {
this.isChecked = this.elementRef.nativeElement.checked;
}
ngAfterViewInit() {
const nativeName = this.elementRef.nativeElement.name;
const shouldSetNativeName = this.state.id !== nativeName && !nativeName;
if (shouldSetNativeName) {
this.renderer.setProperty(this.elementRef.nativeElement, 'name', this.state.id);
this.nativeNameWasSet = true;
}
}
setViewValue(value) {
this.isChecked = value === this.latestValue;
this.renderer.setProperty(this.elementRef.nativeElement, 'checked', this.isChecked);
}
setOnChangeCallback(fn) {
this.onChange = () => fn(this.latestValue);
}
setOnTouchedCallback(fn) {
this.onTouched = fn;
}
setIsDisabled(isDisabled) {
this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', isDisabled);
}
}
NgrxRadioViewAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgrxRadioViewAdapter, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
NgrxRadioViewAdapter.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: NgrxRadioViewAdapter, selector: "input[type=radio][ngrxFormControlState]", inputs: { value: "value", ngrxFormControlState: "ngrxFormControlState" }, host: { listeners: { "change": "onChange()", "blur": "onTouched()" } }, providers: [{
provide: NGRX_FORM_VIEW_ADAPTER,
useExisting: forwardRef(() => NgrxRadioViewAdapter),
multi: true,
}], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgrxRadioViewAdapter, decorators: [{
type: Directive,
args: [{
// tslint:disable-next-line:directive-selector
selector: 'input[type=radio][ngrxFormControlState]',
providers: [{
provide: NGRX_FORM_VIEW_ADAPTER,
useExisting: forwardRef(() => NgrxRadioViewAdapter),
multi: true,
}],
}]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { value: [{
type: Input
}], ngrxFormControlState: [{
type: Input
}], onChange: [{
type: HostListener,
args: ['change']
}], onTouched: [{
type: HostListener,
args: ['blur']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFkaW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvdmlldy1hZGFwdGVyL3JhZGlvLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBaUIsU0FBUyxFQUFjLFVBQVUsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFxQixNQUFNLGVBQWUsQ0FBQztBQUd6SCxPQUFPLEVBQW1CLHNCQUFzQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7O0FBRXpFLHdDQUF3QztBQVd4QyxNQUFNLE9BQU8sb0JBQW9CO0lBbUMvQixZQUNVLFFBQW1CLEVBQ25CLFVBQXNCO1FBRHRCLGFBQVEsR0FBUixRQUFRLENBQVc7UUFDbkIsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQW5DeEIscUJBQWdCLEdBQUcsS0FBSyxDQUFDO1FBNEJqQyxhQUFRLEdBQWUsR0FBRyxFQUFFLENBQUMsS0FBSyxDQUFDLENBQUE7UUFHbkMsY0FBUyxHQUFlLEdBQUcsRUFBRSxDQUFDLEtBQUssQ0FBQyxDQUFBO0lBS2hDLENBQUM7SUFsQ0wsSUFBYSxLQUFLLENBQUMsR0FBUTtRQUN6QixJQUFJLEdBQUcsS0FBSyxJQUFJLENBQUMsV0FBVyxFQUFFO1lBQzVCLElBQUksQ0FBQyxXQUFXLEdBQUcsR0FBRyxDQUFDO1lBQ3ZCLElBQUksSUFBSSxDQUFDLFNBQVMsRUFBRTtnQkFDbEIsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO2FBQ2pCO1NBQ0Y7SUFDSCxDQUFDO0lBRUQsSUFBYSxvQkFBb0IsQ0FBQyxLQUE0QjtRQUM1RCxJQUFJLENBQUMsS0FBSyxFQUFFO1lBQ1YsTUFBTSxJQUFJLEtBQUssQ0FBQywwQ0FBMEMsQ0FBQyxDQUFDO1NBQzdEO1FBRUQsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7UUFDbkIsTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDO1FBQ3RELE1BQU0sbUJBQW1CLEdBQUcsS0FBSyxDQUFDLEVBQUUsS0FBSyxVQUFVLElBQUksSUFBSSxDQUFDLGdCQUFnQixDQUFDO1FBQzdFLElBQUksbUJBQW1CLEVBQUU7WUFDdkIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLEVBQUUsTUFBTSxFQUFFLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQztTQUM1RTtJQUNILENBQUM7SUFnQkQsUUFBUTtRQUNOLElBQUksQ0FBQyxTQUFTLEdBQUksSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFrQyxDQUFDLE9BQU8sQ0FBQztJQUMvRSxDQUFDO0lBRUQsZUFBZTtRQUNiLE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQztRQUN0RCxNQUFNLG1CQUFtQixHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsRUFBRSxLQUFLLFVBQVUsSUFBSSxDQUFDLFVBQVUsQ0FBQztRQUN4RSxJQUFJLG1CQUFtQixFQUFFO1lBQ3ZCLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxFQUFFLE1BQU0sRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQyxDQUFDO1lBQ2hGLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxJQUFJLENBQUM7U0FDOUI7SUFDSCxDQUFDO0lBRUQsWUFBWSxDQUFDLEtBQVU7UUFDckIsSUFBSSxDQUFDLFNBQVMsR0FBRyxLQUFLLEtBQUssSUFBSSxDQUFDLFdBQVcsQ0FBQztRQUM1QyxJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsRUFBRSxTQUFTLEVBQUUsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQ3RGLENBQUM7SUFFRCxtQkFBbUIsQ0FBQyxFQUFvQjtRQUN0QyxJQUFJLENBQUMsUUFBUSxHQUFHLEdBQUcsRUFBRSxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUM7SUFDN0MsQ0FBQztJQUVELG9CQUFvQixDQUFDLEVBQWM7UUFDakMsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVELGFBQWEsQ0FBQyxVQUFtQjtRQUMvQixJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsRUFBRSxVQUFVLEVBQUUsVUFBVSxDQUFDLENBQUM7SUFDbkYsQ0FBQzs7a0hBcEVVLG9CQUFvQjtzR0FBcEIsb0JBQW9CLG9OQU5wQixDQUFDO1lBQ1YsT0FBTyxFQUFFLHNCQUFzQjtZQUMvQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLG9CQUFvQixDQUFDO1lBQ25ELEtBQUssRUFBRSxJQUFJO1NBQ1osQ0FBQzs0RkFFUyxvQkFBb0I7a0JBVGhDLFNBQVM7bUJBQUM7b0JBQ1QsOENBQThDO29CQUM5QyxRQUFRLEVBQUUseUNBQXlDO29CQUNuRCxTQUFTLEVBQUUsQ0FBQzs0QkFDVixPQUFPLEVBQUUsc0JBQXNCOzRCQUMvQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxxQkFBcUIsQ0FBQzs0QkFDbkQsS0FBSyxFQUFFLElBQUk7eUJBQ1osQ0FBQztpQkFDSDt5SEFLYyxLQUFLO3NCQUFqQixLQUFLO2dCQVNPLG9CQUFvQjtzQkFBaEMsS0FBSztnQkFpQk4sUUFBUTtzQkFEUCxZQUFZO3VCQUFDLFFBQVE7Z0JBSXRCLFNBQVM7c0JBRFIsWUFBWTt1QkFBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQWZ0ZXJWaWV3SW5pdCwgRGlyZWN0aXZlLCBFbGVtZW50UmVmLCBmb3J3YXJkUmVmLCBIb3N0TGlzdGVuZXIsIElucHV0LCBPbkluaXQsIFJlbmRlcmVyMiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuaW1wb3J0IHsgRm9ybUNvbnRyb2xTdGF0ZSB9IGZyb20gJy4uL3N0YXRlJztcclxuaW1wb3J0IHsgRm9ybVZpZXdBZGFwdGVyLCBOR1JYX0ZPUk1fVklFV19BREFQVEVSIH0gZnJvbSAnLi92aWV3LWFkYXB0ZXInO1xyXG5cclxuLy8gdHNsaW50OmRpc2FibGU6ZGlyZWN0aXZlLWNsYXNzLXN1ZmZpeFxyXG5cclxuQERpcmVjdGl2ZSh7XHJcbiAgLy8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOmRpcmVjdGl2ZS1zZWxlY3RvclxyXG4gIHNlbGVjdG9yOiAnaW5wdXRbdHlwZT1yYWRpb11bbmdyeEZvcm1Db250cm9sU3RhdGVdJyxcclxuICBwcm92aWRlcnM6IFt7XHJcbiAgICBwcm92aWRlOiBOR1JYX0ZPUk1fVklFV19BREFQVEVSLFxyXG4gICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gTmdyeFJhZGlvVmlld0FkYXB0ZXIpLFxyXG4gICAgbXVsdGk6IHRydWUsXHJcbiAgfV0sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBOZ3J4UmFkaW9WaWV3QWRhcHRlciBpbXBsZW1lbnRzIEZvcm1WaWV3QWRhcHRlciwgT25Jbml0LCBBZnRlclZpZXdJbml0IHtcclxuICBwcml2YXRlIHN0YXRlOiBGb3JtQ29udHJvbFN0YXRlPGFueT47XHJcbiAgcHJpdmF0ZSBuYXRpdmVOYW1lV2FzU2V0ID0gZmFsc2U7XHJcblxyXG4gIEBJbnB1dCgpIHNldCB2YWx1ZSh2YWw6IGFueSkge1xyXG4gICAgaWYgKHZhbCAhPT0gdGhpcy5sYXRlc3RWYWx1ZSkge1xyXG4gICAgICB0aGlzLmxhdGVzdFZhbHVlID0gdmFsO1xyXG4gICAgICBpZiAodGhpcy5pc0NoZWNrZWQpIHtcclxuICAgICAgICB0aGlzLm9uQ2hhbmdlKCk7XHJcbiAgICAgIH1cclxuICAgIH1cclxuICB9XHJcblxyXG4gIEBJbnB1dCgpIHNldCBuZ3J4Rm9ybUNvbnRyb2xTdGF0ZSh2YWx1ZTogRm9ybUNvbnRyb2xTdGF0ZTxhbnk+KSB7XHJcbiAgICBpZiAoIXZhbHVlKSB7XHJcbiAgICAgIHRocm93IG5ldyBFcnJvcignVGhlIGNvbnRyb2wgc3RhdGUgbXVzdCBub3QgYmUgdW5kZWZpbmVkIScpO1xyXG4gICAgfVxyXG5cclxuICAgIHRoaXMuc3RhdGUgPSB2YWx1ZTtcclxuICAgIGNvbnN0IG5hdGl2ZU5hbWUgPSB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5uYW1lO1xyXG4gICAgY29uc3Qgc2hvdWxkU2V0TmF0aXZlTmFtZSA9IHZhbHVlLmlkICE9PSBuYXRpdmVOYW1lICYmIHRoaXMubmF0aXZlTmFtZVdhc1NldDtcclxuICAgIGlmIChzaG91bGRTZXROYXRpdmVOYW1lKSB7XHJcbiAgICAgIHRoaXMucmVuZGVyZXIuc2V0UHJvcGVydHkodGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQsICduYW1lJywgdmFsdWUuaWQpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBsYXRlc3RWYWx1ZTogYW55O1xyXG4gIHByaXZhdGUgaXNDaGVja2VkOiBib29sZWFuO1xyXG5cclxuICBASG9zdExpc3RlbmVyKCdjaGFuZ2UnKVxyXG4gIG9uQ2hhbmdlOiAoKSA9PiB2b2lkID0gKCkgPT4gdm9pZCAwXHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ2JsdXInKVxyXG4gIG9uVG91Y2hlZDogKCkgPT4gdm9pZCA9ICgpID0+IHZvaWQgMFxyXG5cclxuICBjb25zdHJ1Y3RvcihcclxuICAgIHByaXZhdGUgcmVuZGVyZXI6IFJlbmRlcmVyMixcclxuICAgIHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZixcclxuICApIHsgfVxyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuICAgIHRoaXMuaXNDaGVja2VkID0gKHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50IGFzIEhUTUxJbnB1dEVsZW1lbnQpLmNoZWNrZWQ7XHJcbiAgfVxyXG5cclxuICBuZ0FmdGVyVmlld0luaXQoKSB7XHJcbiAgICBjb25zdCBuYXRpdmVOYW1lID0gdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQubmFtZTtcclxuICAgIGNvbnN0IHNob3VsZFNldE5hdGl2ZU5hbWUgPSB0aGlzLnN0YXRlLmlkICE9PSBuYXRpdmVOYW1lICYmICFuYXRpdmVOYW1lO1xyXG4gICAgaWYgKHNob3VsZFNldE5hdGl2ZU5hbWUpIHtcclxuICAgICAgdGhpcy5yZW5kZXJlci5zZXRQcm9wZXJ0eSh0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudCwgJ25hbWUnLCB0aGlzLnN0YXRlLmlkKTtcclxuICAgICAgdGhpcy5uYXRpdmVOYW1lV2FzU2V0ID0gdHJ1ZTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHNldFZpZXdWYWx1ZSh2YWx1ZTogYW55KTogdm9pZCB7XHJcbiAgICB0aGlzLmlzQ2hlY2tlZCA9IHZhbHVlID09PSB0aGlzLmxhdGVzdFZhbHVlO1xyXG4gICAgdGhpcy5yZW5kZXJlci5zZXRQcm9wZXJ0eSh0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudCwgJ2NoZWNrZWQnLCB0aGlzLmlzQ2hlY2tlZCk7XHJcbiAgfVxyXG5cclxuICBzZXRPbkNoYW5nZUNhbGxiYWNrKGZuOiAoXzogYW55KSA9PiB2b2lkKTogdm9pZCB7XHJcbiAgICB0aGlzLm9uQ2hhbmdlID0gKCkgPT4gZm4odGhpcy5sYXRlc3RWYWx1ZSk7XHJcbiAgfVxyXG5cclxuICBzZXRPblRvdWNoZWRDYWxsYmFjayhmbjogKCkgPT4gdm9pZCk6IHZvaWQge1xyXG4gICAgdGhpcy5vblRvdWNoZWQgPSBmbjtcclxuICB9XHJcblxyXG4gIHNldElzRGlzYWJsZWQoaXNEaXNhYmxlZDogYm9vbGVhbik6IHZvaWQge1xyXG4gICAgdGhpcy5yZW5kZXJlci5zZXRQcm9wZXJ0eSh0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudCwgJ2Rpc2FibGVkJywgaXNEaXNhYmxlZCk7XHJcbiAgfVxyXG59XHJcbiJdfQ==