fix: remove generic type constraints from directives to prevent errors during angular template type-checking

Author: MrWolfZ

src/control/directive.ts

@@ -51,15 +51,17 @@ class ControlValueAccessorAdapter implements FormViewAdapter {
   }
 }
 
+export type NgrxFormControlValueType<TStateValue> = TStateValue extends FormControlValueTypes ? TStateValue : never;
+
 @Directive({
   // tslint:disable-next-line:directive-selector
   selector: ':not([ngrxFormsAction])[ngrxFormControlState]',
 })
-export class NgrxFormControlDirective<TStateValue extends FormControlValueTypes, TViewValue = TStateValue> implements AfterViewInit, OnInit {
+export class NgrxFormControlDirective<TStateValue, TViewValue = TStateValue> implements AfterViewInit, OnInit {
   private isInitialized = false;
   private focusTrackingIsEnabled = false;
 
-  @Input() set ngrxFormControlState(newState: FormControlState<TStateValue>) {
+  @Input() set ngrxFormControlState(newState: FormControlState<NgrxFormControlValueType<TStateValue>>) {
     if (!newState) {
       throw new Error('The control state must not be undefined!');
     }
@@ -92,7 +94,7 @@ export class NgrxFormControlDirective<TStateValue extends FormControlValueTypes,
     return this.state && this.state.isFocused ? '' : null;
   }
 
-  state: FormControlState<TStateValue>;
+  state: FormControlState<NgrxFormControlValueType<TStateValue>>;
 
   private viewAdapter: FormViewAdapter;
 
@@ -128,7 +130,10 @@ export class NgrxFormControlDirective<TStateValue extends FormControlValueTypes,
       : selectViewAdapter(viewAdapters);
   }
 
-  updateViewIfControlIdChanged(newState: FormControlState<TStateValue>, oldState: FormControlState<TStateValue> | undefined) {
+  updateViewIfControlIdChanged(
+    newState: FormControlState<NgrxFormControlValueType<TStateValue>>,
+    oldState: FormControlState<NgrxFormControlValueType<TStateValue>> | undefined,
+  ) {
     if (oldState && newState.id === oldState.id) {
       return;
     }
@@ -141,7 +146,10 @@ export class NgrxFormControlDirective<TStateValue extends FormControlValueTypes,
     }
   }
 
-  updateViewIfValueChanged(newState: FormControlState<TStateValue>, _: FormControlState<TStateValue> | undefined) {
+  updateViewIfValueChanged(
+    newState: FormControlState<NgrxFormControlValueType<TStateValue>>,
+    _: FormControlState<NgrxFormControlValueType<TStateValue>> | undefined,
+  ) {
     if (newState.value === this.stateValue) {
       return;
     }
@@ -151,7 +159,10 @@ export class NgrxFormControlDirective<TStateValue extends FormControlValueTypes,
     this.viewAdapter.setViewValue(this.viewValue);
   }
 
-  updateViewIfIsDisabledChanged(newState: FormControlState<TStateValue>, oldState: FormControlState<TStateValue> | undefined) {
+  updateViewIfIsDisabledChanged(
+    newState: FormControlState<NgrxFormControlValueType<TStateValue>>,
+    oldState: FormControlState<NgrxFormControlValueType<TStateValue>> | undefined,
+  ) {
     if (!this.viewAdapter.setIsDisabled) {
       return;
     }
@@ -163,7 +174,10 @@ export class NgrxFormControlDirective<TStateValue extends FormControlValueTypes,
     this.viewAdapter.setIsDisabled(newState.isDisabled);
   }
 
-  updateViewIfIsFocusedChanged(newState: FormControlState<TStateValue>, oldState: FormControlState<TStateValue> | undefined) {
+  updateViewIfIsFocusedChanged(
+    newState: FormControlState<NgrxFormControlValueType<TStateValue>>,
+    oldState: FormControlState<NgrxFormControlValueType<TStateValue>> | undefined,
+  ) {
     if (!this.focusTrackingIsEnabled) {
       return;
     }
@@ -179,7 +193,7 @@ export class NgrxFormControlDirective<TStateValue extends FormControlValueTypes,
     }
   }
 
-  protected dispatchAction(action: Actions<TStateValue>) {
+  protected dispatchAction(action: Actions<NgrxFormControlValueType<TStateValue>>) {
     if (this.actionsSubject !== null) {
       this.actionsSubject.next(action);
     } else {
@@ -208,7 +222,7 @@ export class NgrxFormControlDirective<TStateValue extends FormControlValueTypes,
     const dispatchSetValueAction = () => {
       this.stateValue = this.ngrxValueConverter.convertViewToStateValue(this.viewValue);
       if (this.stateValue !== this.state.value) {
-        this.dispatchAction(new SetValueAction(this.state.id, this.stateValue));
+        this.dispatchAction(new SetValueAction(this.state.id, this.stateValue as NgrxFormControlValueType<TStateValue>));
 
         dispatchMarkAsDirtyAction();
       }

src/control/local-state-directive.ts

@@ -11,18 +11,17 @@ import {
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { Actions } from '../actions';
-import { FormControlValueTypes } from '../state';
 import { FormViewAdapter, NGRX_FORM_VIEW_ADAPTER } from '../view-adapter/view-adapter';
-import { Document, NgrxFormControlDirective } from './directive';
+import { Document, NgrxFormControlDirective, NgrxFormControlValueType } from './directive';
 
 @Directive({
   // tslint:disable-next-line:directive-selector
   selector: '[ngrxFormControlState][ngrxFormsAction]',
 })
-export class NgrxLocalFormControlDirective<TStateValue extends FormControlValueTypes, TViewValue = TStateValue>
+export class NgrxLocalFormControlDirective<TStateValue, TViewValue = TStateValue>
   extends NgrxFormControlDirective<TStateValue, TViewValue> {
 
-  @Output() ngrxFormsAction = new EventEmitter<Actions<TStateValue>>();
+  @Output() ngrxFormsAction = new EventEmitter<Actions<NgrxFormControlValueType<TStateValue>>>();
 
   constructor(
     el: ElementRef,
@@ -33,7 +32,7 @@ export class NgrxLocalFormControlDirective<TStateValue extends FormControlValueT
     super(el, dom, null, viewAdapters, valueAccessors);
   }
 
-  protected dispatchAction(action: Actions<TStateValue>) {
+  protected dispatchAction(action: Actions<NgrxFormControlValueType<TStateValue>>) {
     this.ngrxFormsAction.emit(action);
   }
 }

src/group/directive.ts

@@ -13,17 +13,17 @@ interface CustomEvent extends Event { }
   // tslint:disable-next-line:directive-selector
   selector: 'form:not([ngrxFormsAction])[ngrxFormState]',
 })
-export class NgrxFormDirective<TValue extends { [key: string]: any }> implements OnInit {
+export class NgrxFormDirective<TStateValue> implements OnInit {
   // tslint:disable-next-line:no-input-rename
-  @Input('ngrxFormState') state: FormGroupState<TValue>;
+  @Input('ngrxFormState') state: FormGroupState<TStateValue>;
 
   constructor(
     @Optional() @Inject(ActionsSubject) private actionsSubject: ActionsSubject | null
   ) {
     this.actionsSubject = actionsSubject;
   }
 
-  protected dispatchAction(action: Actions<TValue>) {
+  protected dispatchAction(action: Actions<TStateValue>) {
     if (this.actionsSubject !== null) {
       this.actionsSubject.next(action);
     } else {

src/group/local-state-directive.ts

@@ -7,16 +7,15 @@ import { NgrxFormDirective } from './directive';
   // tslint:disable-next-line:directive-selector
   selector: 'form[ngrxFormState][ngrxFormsAction]',
 })
-export class NgrxLocalFormDirective<TValue extends { [key: string]: any }>
-  extends NgrxFormDirective<TValue> {
+export class NgrxLocalFormDirective<TStateValue> extends NgrxFormDirective<TStateValue> {
 
-  @Output() ngrxFormsAction = new EventEmitter<Actions<TValue>>();
+  @Output() ngrxFormsAction = new EventEmitter<Actions<TStateValue>>();
 
   constructor() {
     super(null);
   }
 
-  protected dispatchAction(action: Actions<TValue>) {
+  protected dispatchAction(action: Actions<TStateValue>) {
     this.ngrxFormsAction.emit(action);
   }
 }

src/ngrx-forms.ts

@@ -73,7 +73,7 @@ export { NgrxRangeViewAdapter } from './view-adapter/range';
 export { NgrxSelectViewAdapter, NgrxSelectOption } from './view-adapter/select';
 export { NgrxSelectMultipleViewAdapter, NgrxSelectMultipleOption } from './view-adapter/select-multiple';
 
-export { NgrxFormControlDirective, NGRX_UPDATE_ON_TYPE } from './control/directive';
+export { NgrxFormControlDirective, NgrxFormControlValueType, NGRX_UPDATE_ON_TYPE } from './control/directive';
 export { NgrxLocalFormControlDirective } from './control/local-state-directive';
 export { NgrxFormDirective } from './group/directive';
 export { NgrxLocalFormDirective } from './group/local-state-directive';