diff --git a/projects/ngx-sub-form/src/lib/helpers.ts b/projects/ngx-sub-form/src/lib/helpers.ts index d7e99685..55e7304b 100644 --- a/projects/ngx-sub-form/src/lib/helpers.ts +++ b/projects/ngx-sub-form/src/lib/helpers.ts @@ -155,7 +155,7 @@ export function createFormDataFromOptions( export const handleFArray = ( formArrayWrappers: FormArrayWrapper[], obj: FormInterface, - createFormArrayControl: NgxSubFormArrayOptions['createFormArrayControl'] | null, + createFormArrayControl: Required>['createFormArrayControl'], ) => { if (!formArrayWrappers.length) { return; @@ -177,11 +177,7 @@ export const handleFArray = ( } for (let i = control.length; i < value.length; i++) { - if (createFormArrayControl) { - control.insert(i, createFormArrayControl(key as ArrayPropertyKey, value[i])); - } else { - control.insert(i, new FormControl(value[i])); - } + control.insert(i, createFormArrayControl(key as ArrayPropertyKey, value[i])); } }); }; diff --git a/projects/ngx-sub-form/src/lib/ngx-sub-form.ts b/projects/ngx-sub-form/src/lib/ngx-sub-form.ts index 5491ed3d..601f586c 100644 --- a/projects/ngx-sub-form/src/lib/ngx-sub-form.ts +++ b/projects/ngx-sub-form/src/lib/ngx-sub-form.ts @@ -1,3 +1,4 @@ +import { FormControl } from '@angular/forms'; import isEqual from 'fast-deep-equal'; import { getObservableLifecycle } from 'ngx-observable-lifecycle'; import { EMPTY, forkJoin, Observable, of, timer } from 'rxjs'; @@ -14,7 +15,13 @@ import { tap, withLatestFrom, } from 'rxjs/operators'; -import { isNullOrUndefined } from './shared/ngx-sub-form-utils'; +import { + ArrayPropertyValue, + isNullOrUndefined, + OneOfControlsTypes, + TypedAbstractControl, + TypedFormControl, +} from './shared/ngx-sub-form-utils'; import { createFormDataFromOptions, getControlValueAccessorBindings, @@ -25,6 +32,7 @@ import { import { ComponentHooks, ControlValueAccessorComponentInstance, + CreateFormArrayControlMethod, FormBindings, FormType, NgxFormOptions, @@ -36,8 +44,9 @@ import { } from './ngx-sub-form.types'; const optionsHaveInstructionsToCreateArrays = ( - options: NgxSubFormOptions, -): options is NgxSubFormOptions & NgxSubFormArrayOptions => true; + options: NgxFormOptions & Partial>, +): options is NgxSubFormOptions & NgxSubFormArrayOptions => + !!options.createFormArrayControl; // @todo find a better name const isRoot = ( @@ -181,19 +190,18 @@ export function createForm( ? lifecyleHooks.onDestroy.pipe(mapTo(null)) : EMPTY; + const createFormArrayControl: Required>['createFormArrayControl'] = + optionsHaveInstructionsToCreateArrays(options) && options.createFormArrayControl + ? options.createFormArrayControl + : (key, initialValue) => new FormControl(initialValue); + const sideEffects = { broadcastValueToParent$: registerOnChange$.pipe( switchMap(onChange => broadcastValueToParent$.pipe(tap(value => onChange(value)))), ), applyUpstreamUpdateOnLocalForm$: transformedValue$.pipe( tap(value => { - handleFormArrays( - formArrays, - value, - optionsHaveInstructionsToCreateArrays(options) - ? options.createFormArrayControl - : null, - ); + handleFormArrays(formArrays, value, createFormArrayControl); formGroup.reset(value, { emitEvent: false }); @@ -241,7 +249,6 @@ export function createForm( get formGroupErrors() { return getFormGroupErrors(formGroup); }, - // todo - createFormArrayControl: (options as any).createFormArrayControl, + createFormArrayControl, }; } diff --git a/projects/ngx-sub-form/src/lib/ngx-sub-form.types.ts b/projects/ngx-sub-form/src/lib/ngx-sub-form.types.ts index d219548f..18bad61d 100644 --- a/projects/ngx-sub-form/src/lib/ngx-sub-form.types.ts +++ b/projects/ngx-sub-form/src/lib/ngx-sub-form.types.ts @@ -7,6 +7,7 @@ import { Controls, ControlsNames, NewFormErrors, + OneOfControlsTypes, TypedFormGroup, } from './shared/ngx-sub-form-utils'; import { FormGroupOptions } from './shared/ngx-sub-form.types'; @@ -33,18 +34,20 @@ export interface NgxSubForm { readonly formGroup: TypedFormGroup; readonly formControlNames: ControlsNames; readonly formGroupErrors: NewFormErrors; - readonly createFormArrayControl: any; + readonly createFormArrayControl: CreateFormArrayControlMethod; } +export type CreateFormArrayControlMethod = >( + key: K, + initialValue: ArrayPropertyValue, +) => FormControl; + export interface NgxRootForm extends NgxSubForm { // @todo: anything else needed here? } export interface NgxSubFormArrayOptions { - createFormArrayControl?: ( - key: ArrayPropertyKey, - value: ArrayPropertyValue, - ) => FormControl; + createFormArrayControl?: CreateFormArrayControlMethod; } export interface NgxSubFormRemapOptions { diff --git a/src/app/main-rewrite/listing/listing-form/vehicle-listing/crew-members/crew-members.component.ts b/src/app/main-rewrite/listing/listing-form/vehicle-listing/crew-members/crew-members.component.ts index 99c98c34..434ecdb0 100644 --- a/src/app/main-rewrite/listing/listing-form/vehicle-listing/crew-members/crew-members.component.ts +++ b/src/app/main-rewrite/listing/listing-form/vehicle-listing/crew-members/crew-members.component.ts @@ -27,10 +27,7 @@ export class CrewMembersComponent { fromFormGroup: (formValue: CrewMembersForm): CrewMember[] => { return formValue.crewMembers; }, - createFormArrayControl: ( - key: ArrayPropertyKey | undefined, - value: ArrayPropertyValue, - ) => { + createFormArrayControl: (key, value) => { switch (key) { case 'crewMembers': return new FormControl(value, [Validators.required]);