diff --git a/src/app/app.ts b/src/app/app.ts index f8dd1d2..55ba3a7 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -1,13 +1,14 @@ import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core'; import { AppStateStore } from './app.state'; import { StartingPoint } from './views/starting-point/starting-point'; +import { CollegeSelection } from './views/college-selection/college-selection'; @Component({ selector: 'app-root', templateUrl: './app.html', styleUrl: './app.scss', changeDetection: ChangeDetectionStrategy.OnPush, - imports: [StartingPoint], + imports: [StartingPoint, CollegeSelection], }) export class App implements OnInit { private readonly state = inject(AppStateStore); diff --git a/src/app/views/starting-point/starting-point.state.ts b/src/app/views/starting-point/starting-point.state.ts index 4ff1b47..afd04ae 100644 --- a/src/app/views/starting-point/starting-point.state.ts +++ b/src/app/views/starting-point/starting-point.state.ts @@ -1,10 +1,11 @@ -import { effect } from '@angular/core'; -import { getState, patchState, signalStore, watchState, withHooks, withMethods, withState } from '@ngrx/signals'; +import { FormControlStatus } from '@angular/forms'; +import { patchState, signalStore, watchState, withHooks, withMethods, withState } from '@ngrx/signals'; export type StartingPointState = { name: string; gender: Gender; afterHighSchool: AfterHighSchool; + formStatus: FormControlStatus; }; export enum Gender { @@ -23,16 +24,26 @@ const initialState: StartingPointState = { name: '', gender: Gender.Undefined, afterHighSchool: AfterHighSchool.Undefined, + formStatus: 'INVALID', }; export const StartingPointStateStore = signalStore( withState(initialState), withMethods(store => ({ updateState: ({ name, gender, afterHighSchool }: Partial) => - patchState(store, () => ({ - name: name ?? '', - gender: gender ?? Gender.Undefined, - afterHighSchool: afterHighSchool ?? AfterHighSchool.Undefined, + patchState(store, state => { + const updatedState: Partial = Object.fromEntries( + Object.entries({ name, gender, afterHighSchool }).filter(([, value]) => !!value) + ); + return { + ...state, + ...updatedState, + }; + }), + updateFormStatus: (formStatus: FormControlStatus) => + patchState(store, state => ({ + ...state, + formStatus, })), })), withHooks({ diff --git a/src/app/views/starting-point/starting-point.ts b/src/app/views/starting-point/starting-point.ts index e9daea9..96ce0b4 100644 --- a/src/app/views/starting-point/starting-point.ts +++ b/src/app/views/starting-point/starting-point.ts @@ -71,6 +71,8 @@ export class StartingPoint implements OnInit { .subscribe(({ name, gender, afterHighSchool }) => this.state.updateState({ name, gender, afterHighSchool } as Partial) ); + + this.form.statusChanges.pipe(takeUntilDestroyed()).subscribe(status => this.state.updateFormStatus(status)); } ngOnInit(): void {}