diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 00000000..1348ba4a --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:4200", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/README.md b/README.md index b7cc5f55..c628495a 100644 --- a/README.md +++ b/README.md @@ -61,15 +61,16 @@ This function takes as parameter a configuration object and returns an object re -| Key | Type | Optional or required | Root form | Sub form | What is it for? | -| ----------------------- | --------------------------------------------------------------------------- | -------------------- | --------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `formType` | `FormType` | Required | ✅ | ✅ | Defines the type of the form. Can either be `FormType.ROOT` or `FormType.SUB` | -| `disabled$` | `Observable` | Required | ✅ | ❌ | When this observable emits `true`, the whole form (including the root form and all the sub forms) will be disabled | -| `input$` | `Observable` | Required | ✅ | ❌ | A root form is a component in between the parent passing raw data and the form itself. This property is an observable that you must provide which will be used behind the scenes to update for you the form values | -| `output$` | `Subject` | Required | ✅ | ❌ | A root form is a component in between the parent passing raw data and the form itself. This property is an observable that you must provide which will be used behind the scenes to broadcast the form value to the parent when it changes | -| `manualSave$` | `Observable` | Optional | ✅ | ❌ | By default a root form will automatically broadcast all the form updates (through the `output$`) as soon as there's a change. If you wish to "save" the form only when you click on a save button for example, you can create a subject on your side and pass it here. Whenever you call `next` on your subject, assuming the form is valid, it'll broadcast te form value to the parent (through the `output$`) | -| `outputFilterPredicate` | `(currentInputValue: FormInterface, outputValue: FormInterface) => boolean` | Optional | ✅ | ❌ | The default behaviour is to compare the current transformed value of `input$` with the current value of the form _(deep check)_, and if these are equal, the value won't be passed to `output$` in order to prevent the broadcast | -| `handleEmissionRate` | `(obs$: Observable) => Observable` | Optional | ✅ | ❌ | If you want to control how frequently the form emits on the `output$`, you can customise the emission rate with this. Example: `handleEmissionRate: formValue$ => formValue$.pipe(debounceTime(300))` | +| Key | Type | Optional or required | Root form | Sub form | What is it for? | +| ------------------------ | --------------------------------------------------------------------------- | -------------------- | --------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `formType` | `FormType` | Required | ✅ | ✅ | Defines the type of the form. Can either be `FormType.ROOT` or `FormType.SUB` | +| `disabled$` | `Observable` | Required | ✅ | ❌ | When this observable emits `true`, the whole form (including the root form and all the sub forms) will be disabled | +| `input$` | `Observable` | Required | ✅ | ❌ | A root form is a component in between the parent passing raw data and the form itself. This property is an observable that you must provide which will be used behind the scenes to update for you the form values | +| `output$` | `Subject` | Required | ✅ | ❌ | A root form is a component in between the parent passing raw data and the form itself. This property is an observable that you must provide which will be used behind the scenes to broadcast the form value to the parent when it changes | +| `manualSave$` | `Observable` | Optional | ✅ | ❌ | By default a root form will automatically broadcast all the form updates (through the `output$`) as soon as there's a change. If you wish to "save" the form only when you click on a save button for example, you can create a subject on your side and pass it here. Whenever you call `next` on your subject, assuming the form is valid, it'll broadcast te form value to the parent (through the `output$`) | +| `outputFilterPredicate` | `(currentInputValue: FormInterface, outputValue: FormInterface) => boolean` | Optional | ✅ | ❌ | The default behaviour is to compare the current transformed value of `input$` with the current value of the form _(deep check)_, and if these are equal, the value won't be passed to `output$` in order to prevent the broadcast | +| `handleEmissionRate` | `(obs$: Observable) => Observable` | Optional | ✅ | ❌ | If you want to control how frequently the form emits on the `output$`, you can customise the emission rate with this. Example: `handleEmissionRate: formValue$ => formValue$.pipe(debounceTime(300))` | +| `emitInitialValueOnInit` | `boolean` | Optional | ✅ | ✅ | Controls whether the form (root or sub) will emit the default values provided with the `FormControls` if they are valid. The default behavior is not to emit the default values | # Principles diff --git a/projects/ngx-sub-form/src/lib/create-form.ts b/projects/ngx-sub-form/src/lib/create-form.ts index 90097533..ff568974 100644 --- a/projects/ngx-sub-form/src/lib/create-form.ts +++ b/projects/ngx-sub-form/src/lib/create-form.ts @@ -6,6 +6,7 @@ import { combineLatest, concat, EMPTY, identity, merge, Observable, of, timer } import { delay, filter, + first, map, mapTo, shareReplay, @@ -150,17 +151,62 @@ export function createForm( shareReplay({ refCount: true, bufferSize: 1 }), ); + const broadcastDefaultValueToParent$: Observable = transformedValue$.pipe( + first(), + filter(() => options.emitDefaultValue ?? false), + switchMap(transformedValue => { + const defaultValue$ = of(transformedValue); + if (!isRoot(options)) { + return defaultValue$.pipe(delay(0)); + } else { + // it might be surprising to see formGroup validity being checked twice + // here, however this is intentional. The delay(0) allows any sub form + // components to populate values into the form, and it is possible for + // the form to be invalid after this process. In which case we suppress + // outputting an invalid value, and wait for the user to make the value + // become valid. + return defaultValue$.pipe( + filter(() => formGroup.valid), + delay(0), + filter(formValue => { + if (formGroup.invalid) { + return false; + } + + if (options.outputFilterPredicate) { + return options.outputFilterPredicate(transformedValue, formValue); + } + + return true; + }), + options.handleEmissionRate ?? identity, + ); + } + }), + map(value => + options.fromFormGroup + ? options.fromFormGroup(value) + : // if it's not a remap component, the ControlInterface === the FormInterface + (value as any as ControlInterface), + ), + ); + const broadcastValueToParent$: Observable = transformedValue$.pipe( switchMap(transformedValue => { + const valueChanges = formGroup.valueChanges; if (!isRoot(options)) { - return formGroup.valueChanges.pipe(delay(0)); + return valueChanges.pipe( + delay(0), + tap(v => console.log('not root', v)), + ); } else { const formValues$ = options.manualSave$ ? options.manualSave$.pipe( - withLatestFrom(formGroup.valueChanges), + withLatestFrom(valueChanges), + tap(console.log), map(([_, formValue]) => formValue), ) - : formGroup.valueChanges; + : valueChanges.pipe(tap(console.log)); // it might be surprising to see formGroup validity being checked twice // here, however this is intentional. The delay(0) allows any sub form @@ -169,6 +215,7 @@ export function createForm( // outputting an invalid value, and wait for the user to make the value // become valid. return formValues$.pipe( + tap(v => console.log('formValues$', v)), filter(() => formGroup.valid), delay(0), filter(formValue => { @@ -217,6 +264,9 @@ export function createForm( broadcastValueToParent$: registerOnChange$.pipe( switchMap(onChange => broadcastValueToParent$.pipe(tap(value => onChange(value)))), ), + broadcastDefaultValueToParent$: registerOnChange$.pipe( + switchMap(onChange => broadcastDefaultValueToParent$.pipe(tap(value => onChange(value)))), + ), applyUpstreamUpdateOnLocalForm$: transformedValue$.pipe( tap(value => { handleFormArrays(formArrays, value, 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 ed51a4c2..52c55214 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 @@ -78,6 +78,7 @@ export type NgxSubFormOptions< formControls: Controls; formGroupOptions?: FormGroupOptions; emitNullOnDestroy?: boolean; + emitDefaultValue?: boolean; componentHooks?: ComponentHooks; // emit on this observable to mark the control as touched touched$?: Observable; diff --git a/src/app/main/listing/listing-form/droid-listing/assassin-droid/assassin-droid.component.ts b/src/app/main/listing/listing-form/droid-listing/assassin-droid/assassin-droid.component.ts index 60473c9a..919a867a 100644 --- a/src/app/main/listing/listing-form/droid-listing/assassin-droid/assassin-droid.component.ts +++ b/src/app/main/listing/listing-form/droid-listing/assassin-droid/assassin-droid.component.ts @@ -24,11 +24,12 @@ export class AssassinDroidComponent { public form = createForm(this, { formType: FormType.SUB, + emitDefaultValue: true, formControls: { - color: new UntypedFormControl(null, { validators: [Validators.required] }), - name: new UntypedFormControl(null, { validators: [Validators.required] }), + color: new UntypedFormControl('#111111', { validators: [Validators.required] }), + name: new UntypedFormControl('hello', { validators: [Validators.required] }), droidType: new UntypedFormControl(DroidType.ASSASSIN, { validators: [Validators.required] }), - weapons: new UntypedFormControl([], { validators: [Validators.required] }), + weapons: new UntypedFormControl(['Axe'], { validators: [Validators.required] }), }, }); } diff --git a/src/app/main/listing/listing-form/listing-form.component.ts b/src/app/main/listing/listing-form/listing-form.component.ts index c7803873..9d5d33e0 100644 --- a/src/app/main/listing/listing-form/listing-form.component.ts +++ b/src/app/main/listing/listing-form/listing-form.component.ts @@ -48,7 +48,7 @@ export class ListingFormComponent { manualSave$: this.manualSave$$, formControls: { vehicleProduct: new UntypedFormControl(null), - droidProduct: new UntypedFormControl(null), + droidProduct: new UntypedFormControl(null, Validators.required), listingType: new UntypedFormControl(null, Validators.required), id: new UntypedFormControl(null, Validators.required), title: new UntypedFormControl(null, Validators.required), diff --git a/src/app/main/listing/listing.component.html b/src/app/main/listing/listing.component.html index 286594d2..a300aae3 100644 --- a/src/app/main/listing/listing.component.html +++ b/src/app/main/listing/listing.component.html @@ -1,5 +1,6 @@ Readonly +{{ listingOutput | json }}