feat: move child form initial satte into child form

Author: d-koppenhagen

src/app/identity-form/identity-form.ts

@@ -8,6 +8,12 @@ export interface GenderIdentity {
   pronoun: string; // e. g. "they/them"
 }
 
+export const initialGenderIdentityState: GenderIdentity = {
+  gender: '',
+  salutation: '',
+  pronoun: '',
+};
+
 export const identitySchema = schema<GenderIdentity>((path) => {
   hidden(path.salutation, (ctx) => {
     return !ctx.valueOf(path.gender) || ctx.valueOf(path.gender) !== 'diverse';

src/app/registration-form-1/registration-form-1.ts

@@ -14,6 +14,14 @@ export interface RegisterFormData {
   agreeToTermsAndConditions: boolean;
 }
 
+const initialState: RegisterFormData = {
+  username: '',
+  age: 18,
+  email: [''],
+  newsletter: false,
+  agreeToTermsAndConditions: false,
+};
+
 export const formSchema = schema<RegisterFormData>((fieldPath) => {
   // Username validation
   required(fieldPath.username, { message: 'Username is required' });
@@ -29,14 +37,6 @@ export const formSchema = schema<RegisterFormData>((fieldPath) => {
   });
 });
 
-const initialState: RegisterFormData = {
-  username: '',
-  age: 18,
-  email: [''],
-  newsletter: false,
-  agreeToTermsAndConditions: false,
-};
-
 @Component({
   selector: 'app-registration-form-1',
   imports: [BackButton, Control, DebugOutput, FormError],

src/app/registration-form-2/registration-form-2.ts

@@ -16,6 +16,16 @@ export interface RegisterFormData {
   agreeToTermsAndConditions: boolean;
 }
 
+const initialState: RegisterFormData = {
+  username: '',
+  age: 18,
+  password: { pw1: '', pw2: '' },
+  email: [''],
+  newsletter: false,
+  newsletterTopics: '',
+  agreeToTermsAndConditions: false,
+};
+
 export const formSchema = schema<RegisterFormData>((fieldPath) => {
   // Username validation
   required(fieldPath.username, { message: 'Username is required' });
@@ -104,21 +114,11 @@ export const formSchema = schema<RegisterFormData>((fieldPath) => {
       );
     }
   );
-  
+
   // Disable newsletter topics when newsletter is unchecked
   disabled(fieldPath.newsletterTopics, (ctx) => !ctx.valueOf(fieldPath.newsletter));
 });
 
-const initialState: RegisterFormData = {
-  username: '',
-  age: 18,
-  password: { pw1: '', pw2: '' },
-  email: [''],
-  newsletter: false,
-  newsletterTopics: '',
-  agreeToTermsAndConditions: false,
-};
-
 @Component({
   selector: 'app-registration-form-2',
   imports: [BackButton, Control, DebugOutput, FormError],

src/app/registration-form-3/registration-form-3.ts

@@ -4,7 +4,7 @@ import { apply, applyEach, applyWhen, Control, customError, CustomValidationErro
 import { BackButton } from '../back-button/back-button';
 import { DebugOutput } from '../debug-output/debug-output';
 import { FormError } from '../form-error/form-error';
-import { GenderIdentity, IdentityForm, identitySchema } from '../identity-form/identity-form';
+import { GenderIdentity, IdentityForm, identitySchema, initialGenderIdentityState } from '../identity-form/identity-form';
 import { Multiselect } from '../multiselect/multiselect';
 import { RegistrationService } from '../registration-service';
 
@@ -19,6 +19,17 @@ export interface RegisterFormData {
   agreeToTermsAndConditions: boolean;
 }
 
+const initialState: RegisterFormData = {
+  username: '',
+  identity: initialGenderIdentityState,
+  age: 18,
+  password: { pw1: '', pw2: '' },
+  email: [''],
+  newsletter: false,
+  newsletterTopics: ['Angular'],
+  agreeToTermsAndConditions: false,
+};
+
 export const formSchema = schema<RegisterFormData>((fieldPath) => {
   // Username validation
   required(fieldPath.username, { message: 'Username is required' });
@@ -115,21 +126,6 @@ export const formSchema = schema<RegisterFormData>((fieldPath) => {
   apply(fieldPath.identity, identitySchema);
 });
 
-const initialState: RegisterFormData = {
-  username: '',
-  identity: {
-    gender: '',
-    salutation: '',
-    pronoun: '',
-  },
-  age: 18,
-  password: { pw1: '', pw2: '' },
-  email: [''],
-  newsletter: false,
-  newsletterTopics: ['Angular'],
-  agreeToTermsAndConditions: false,
-};
-
 @Component({
   selector: 'app-registration-form-3',
   imports: [BackButton, Control, DebugOutput, FormError, IdentityForm, Multiselect],