DS-410: cleaning

ngx-fudis/projects/dev/src/app/components/formExamples.component.ts

@@ -16,11 +16,18 @@ import { FudisValidators } from 'projects/ngx-fudis/src/lib/utilities/form/valid
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { defaultOptions } from 'projects/ngx-fudis/src/lib/components/form/select/common/mock_data';
 
+type MyCheckboxGroup = {
+  blueberry: FormControl<boolean | null>;
+  cloudberry: FormControl<boolean | null>;
+  raspberry: FormControl<boolean | null>;
+  strawberry: FormControl<boolean | null>;
+};
+
 type MyForm = {
   textArea: FormControl<string | null>;
   textInput: FormControl<string | null | number>;
   truth: FormControl<boolean | null>;
-  checkboxFormGroup: FormGroup;
+  checkboxFormGroup: FormGroup<MyCheckboxGroup>;
   date: FormControl<Date | null>;
   withLanguages: FormGroup;
 };
@@ -129,10 +136,10 @@ export class AppFormExampleComponent {
     ),
     checkboxFormGroup: new FormGroup(
       {
-        blueberry: new FormControl<boolean | null | undefined>(null),
-        cloudberry: new FormControl<boolean | null | undefined>(null),
-        raspberry: new FormControl<boolean | null | undefined>(null),
-        strawberry: new FormControl<boolean | null | undefined>(null),
+        blueberry: new FormControl<boolean | null>(null),
+        cloudberry: new FormControl<boolean | null>(null),
+        raspberry: new FormControl<boolean | null>(null),
+        strawberry: new FormControl<boolean | null>(null),
       },
       [
         FudisGroupValidators.min({

ngx-fudis/projects/ngx-fudis/src/lib/components/form/checkbox-group/checkbox-group.mdx

@@ -25,7 +25,7 @@ Checkbox Group can be built in two ways:
 
 Checkbox Group can be provided with `formGroup` property, which is an Angular FormGroup typed object. Mandatory `label` property must also be provided.
 
-Form Group must be built with Angular Form Controls, which can have a type of `FormControl<boolean | null | undefined>`.
+Form Group must be built with Angular Form Controls, which can have a type of `FormControl<boolean | null>`.
 
 Providing `formGroup` for the parent allows including [Validators for the Checkbox Group](#validators-with-form-group) as well.
 
@@ -38,11 +38,17 @@ For child Checkbox components mandatory properties are `controlName` and `label`
 ```
 // In TypeScript file
 
-myFormGroup = new FormGroup(
+interface MyCheckboxGroup {
+  apple: FormControl<boolean | null>;
+  fairTradeBanana: FormControl<boolean | null>;
+  pear: FormControl<boolean | null>;
+}
+
+myFormGroup = new FormGroup<MyCheckboxGroup>(
   {
-    apple: new FormControl<boolean | null | undefined>(null),
-    fairTradeBanana: new FormControl<boolean | null | undefined>(null),
-    pear: new FormControl<boolean | null | undefined>(null),
+    apple: new FormControl<boolean | null>(null),
+    fairTradeBanana: new FormControl<boolean | null>(null),
+    pear: new FormControl<boolean | null>(null),
   }
 );
 
@@ -75,7 +81,7 @@ When parent isn't provided with `formGroup` property, it will create one interna
 
 ### Child Checkboxes
 
-Property `control` is Angular `FormControl<boolean | null | undefined>` typed object. When it is provided, it will be added to the internally created Form Group of the Checkbox Group. If `controlName` property is provided, it will be used as this control's key in the Form Group. Otherwise internally generated id will be used.
+Property `control` is Angular `FormControl<boolean | null>` typed object. When it is provided, it will be added to the internally created Form Group of the Checkbox Group. If `controlName` property is provided, it will be used as this control's key in the Form Group. Otherwise internally generated id will be used.
 
 ### Code Example
 
@@ -86,9 +92,9 @@ myOptionsWithControls = [
 
   // Note! Provided controlName property is optional this way. If it is not given, Fudis will use the id of the checkbox as controlName.
 
-  {label: 'Apple', controlName: 'apple', control: new FormControl<boolean | null | undefined>(null)},
-  {label: 'Fair Trade Banana', controlName: 'fairTradeBanana', new FormControl<boolean | null | undefined>(true)},
-  {label: 'Pear', controlName: 'pear', new FormControl<boolean | null | undefined>(null)},
+  {label: 'Apple', controlName: 'apple', control: new FormControl<boolean | null>(null)},
+  {label: 'Fair Trade Banana', controlName: 'fairTradeBanana', new FormControl<boolean | null>(true)},
+  {label: 'Pear', controlName: 'pear', new FormControl<boolean | null>(null)},
 ]
 
 // HTML template

ngx-fudis/projects/ngx-fudis/src/lib/components/form/checkbox-group/checkbox-group.stories.ts

@@ -3,7 +3,6 @@ import { FormsModule, ReactiveFormsModule, FormGroup, FormControl } from '@angul
 import { action } from '@storybook/addon-actions';
 import { BehaviorSubject } from 'rxjs';
 import { CheckboxGroupComponent } from './checkbox-group.component';
-import { FudisCheckboxGroupFormGroup } from '../../../types/forms';
 import docs from './checkbox-group.mdx';
 import { FudisGroupValidators } from '../../../utilities/form/groupValidators';
 import { checkboxGroupControlsExclude } from '../../../utilities/storybook';
@@ -44,37 +43,37 @@ const options = [
   {
     controlName: 'apple',
     label: 'Apple',
-    control: new FormControl<boolean | null | undefined>(null),
+    control: new FormControl<boolean | null>(null),
   },
   {
     controlName: 'fairTradeBanana',
     label: 'Fair trade banana',
-    control: new FormControl<boolean | null | undefined>(null),
+    control: new FormControl<boolean | null>(null),
   },
   {
     controlName: 'pear',
     label: 'Pear',
-    control: new FormControl<boolean | null | undefined>(null),
+    control: new FormControl<boolean | null>(null),
   },
   {
     controlName: 'pineapple',
     label: 'Pineapple',
-    control: new FormControl<boolean | null | undefined>(null),
+    control: new FormControl<boolean | null>(null),
   },
   {
     controlName: 'orange',
     label: 'Orange',
-    control: new FormControl<boolean | null | undefined>(null),
+    control: new FormControl<boolean | null>(null),
   },
 ];
 
-const basicFormGroup = new FormGroup<FudisCheckboxGroupFormGroup<object>>(
+const basicFormGroup = new FormGroup(
   {
-    apple: new FormControl<boolean | null | undefined>(null),
-    fairTradeBanana: new FormControl<boolean | null | undefined>(null),
-    pear: new FormControl<boolean | null | undefined>(null),
-    pineapple: new FormControl<boolean | null | undefined>(null),
-    orange: new FormControl<boolean | null | undefined>(null),
+    apple: new FormControl<boolean | null>(null),
+    fairTradeBanana: new FormControl<boolean | null>(null),
+    pear: new FormControl<boolean | null>(null),
+    pineapple: new FormControl<boolean | null>(null),
+    orange: new FormControl<boolean | null>(null),
   },
   [FudisGroupValidators.oneRequired(new BehaviorSubject('No fruit picked! :('))],
 );
@@ -118,13 +117,13 @@ Example.args = {
   tooltipPosition: 'right',
 };
 
-const withDisabledFormGroupOptions = new FormGroup<FudisCheckboxGroupFormGroup<object>>(
+const withDisabledFormGroupOptions = new FormGroup(
   {
-    apple: new FormControl<boolean | null | undefined>({ value: true, disabled: true }),
-    fairTradeBanana: new FormControl<boolean | null | undefined | null>(null),
-    pear: new FormControl<boolean | null | undefined | null>({ value: false, disabled: true }),
-    pineapple: new FormControl<boolean | null | undefined | null>(null),
-    orange: new FormControl<boolean | null | undefined | null>({ value: null, disabled: true }),
+    apple: new FormControl<boolean | null>({ value: true, disabled: true }),
+    fairTradeBanana: new FormControl<boolean | null | null>(null),
+    pear: new FormControl<boolean | null | null>({ value: false, disabled: true }),
+    pineapple: new FormControl<boolean | null | null>(null),
+    orange: new FormControl<boolean | null | null>({ value: null, disabled: true }),
   },
   [FudisGroupValidators.oneRequired(new BehaviorSubject('Please pick one! :('))],
 );
@@ -168,13 +167,13 @@ ExampleWithDisabledOption.args = {
   tooltipPosition: 'right',
 };
 
-const withMinMaxFormGroupOptions = new FormGroup<FudisCheckboxGroupFormGroup<object>>(
+const withMinMaxFormGroupOptions = new FormGroup(
   {
-    apple: new FormControl<boolean | null | undefined>(null),
-    fairTradeBanana: new FormControl<boolean | null | undefined | null>(null),
-    pear: new FormControl<boolean | null | undefined | null>(null),
-    pineapple: new FormControl<boolean | null | undefined | null>(null),
-    orange: new FormControl<boolean | null | undefined | null>(null),
+    apple: new FormControl<boolean | null>(null),
+    fairTradeBanana: new FormControl<boolean | null | null>(null),
+    pear: new FormControl<boolean | null | null>(null),
+    pineapple: new FormControl<boolean | null | null>(null),
+    orange: new FormControl<boolean | null | null>(null),
   },
   [
     FudisGroupValidators.min({

ngx-fudis/projects/ngx-fudis/src/lib/components/form/checkbox-group/checkbox/checkbox.component.spec.ts

@@ -23,11 +23,11 @@ import { ValidatorErrorMessageComponent } from '../../error-message/validator-er
 import { FudisInternalErrorSummaryService } from '../../../../services/form/error-summary/internal-error-summary.service';
 
 type TestForm = {
-  apple: FormControl<boolean | null | undefined>;
-  fairTradeBanana: FormControl<boolean | null | undefined>;
-  pear: FormControl<boolean | null | undefined>;
-  pineapple: FormControl<boolean | null | undefined>;
-  orange: FormControl<boolean | null | undefined>;
+  apple: FormControl<boolean | null>;
+  fairTradeBanana: FormControl<boolean | null>;
+  pear: FormControl<boolean | null>;
+  pineapple: FormControl<boolean | null>;
+  orange: FormControl<boolean | null>;
 };
 
 @Component({
@@ -54,18 +54,20 @@ type TestForm = {
     </fudis-checkbox-group> `,
 })
 class MockContainerComponent {
-  @ViewChild('firstGroup') firstGroup: CheckboxGroupComponent<FudisCheckboxGroupFormGroup<object>>;
+  @ViewChild('firstGroup') firstGroup: CheckboxGroupComponent<
+    FudisCheckboxGroupFormGroup<TestForm>
+  >;
   @ViewChild('secondGroup') secondGroup: CheckboxGroupComponent<
-    FudisCheckboxGroupFormGroup<object>
+    FudisCheckboxGroupFormGroup<TestForm>
   >;
 
   public testFromGroup = new FormGroup<TestForm>(
     {
-      apple: new FormControl<boolean | null | undefined>(null),
-      fairTradeBanana: new FormControl<boolean | null | undefined>(false),
-      orange: new FormControl<boolean | null | undefined>(undefined),
-      pear: new FormControl<boolean | null | undefined>(true),
-      pineapple: new FormControl<boolean | null | undefined>({ value: false, disabled: true }),
+      apple: new FormControl<boolean | null>(null),
+      fairTradeBanana: new FormControl<boolean | null>(false),
+      orange: new FormControl<boolean | null>(null),
+      pear: new FormControl<boolean | null>(true),
+      pineapple: new FormControl<boolean | null>({ value: false, disabled: true }),
     },
     [
       FudisGroupValidators.min({ value: 2, message: new BehaviorSubject('Too few selected') }),

ngx-fudis/projects/ngx-fudis/src/lib/components/form/error-summary/example/error-summary-example.component.ts

@@ -7,7 +7,6 @@ import { Observable } from 'rxjs';
 import { FudisErrorSummaryService } from '../../../../services/form/error-summary/error-summary.service';
 import { FudisGroupValidators } from '../../../../utilities/form/groupValidators';
 import { FudisValidators } from '../../../../utilities/form/validators';
-import { FudisCheckboxGroupFormGroup } from '../../../../types/forms';
 import { FudisTranslationService } from '../../../../services/translation/translation.service';
 import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
 
@@ -18,6 +17,12 @@ type Error = {
   message: Observable<string>;
 };
 
+interface CourseBooksFormGroup {
+  first: FormControl<boolean | null>;
+  second: FormControl<boolean | null>;
+  third: FormControl<boolean | null>;
+}
+
 @Component({
   standalone: true,
   imports: [NgxFudisModule, CommonModule, TranslocoDirective],
@@ -34,7 +39,7 @@ export class ErrorSummaryExampleComponent implements OnInit {
   toggleLive: FudisFormErrorSummaryUpdateStrategy = 'reloadOnly';
 
   formExample = new FormGroup({
-    courseBooks: new FormGroup<FudisCheckboxGroupFormGroup<object>>(
+    courseBooks: new FormGroup<CourseBooksFormGroup>(
       {
         first: new FormControl(null),
         second: new FormControl(null),

ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/examples/form-example-with-dynamic-validators.component.ts

@@ -2,27 +2,34 @@ import { CommonModule } from '@angular/common';
 import { Component, Input } from '@angular/core';
 import { NgxFudisModule } from '../../../../ngx-fudis.module';
 import { FormGroup, FormControl } from '@angular/forms';
-import {
-  FudisCheckboxGroupFormGroup,
-  FudisRadioButtonOption,
-  FudisSelectOption,
-} from '../../../../types/forms';
+import { FudisRadioButtonOption, FudisSelectOption } from '../../../../types/forms';
 import { FudisBadgeVariant } from '../../../../types/miscellaneous';
 import { FudisHeadingVariant, FudisHeadingLevel } from '../../../../types/typography';
 import { FudisValidatorFn, FudisValidators } from '../../../../utilities/form/validators';
 import { FudisGroupValidators } from '../../../../utilities/form/groupValidators';
 
 import { FudisInternalErrorSummaryService } from '../../../../services/form/error-summary/internal-error-summary.service';
 
+type SummerCheckbox = {
+  summer: FormControl<boolean | null>;
+};
+interface WinterCheckbox {
+  winter: FormControl<boolean | null>;
+}
+
+type WorkingCheckbox = {
+  working: FormControl<boolean | null>;
+};
+
 type MyForm = {
   text: FormControl<string | null>;
   email: FormControl<string | null>;
   number: FormControl<number | null>;
   date: FormControl<Date | null>;
   animal: FormControl<FudisSelectOption<object> | null>;
-  summer: FormGroup<FudisCheckboxGroupFormGroup<object>>;
-  winter: FormGroup<FudisCheckboxGroupFormGroup<object>>;
-  working: FormGroup<FudisCheckboxGroupFormGroup<object>>;
+  summer: FormGroup<SummerCheckbox>;
+  winter: FormGroup<WinterCheckbox>;
+  working: FormGroup<WorkingCheckbox>;
   sport: FormControl;
   dj: FormGroup;
 };
@@ -168,7 +175,7 @@ type MyForm = {
                   [formGroup]="formExample.controls.summer"
                 >
                   <fudis-checkbox
-                    [controlName]="'summer1'"
+                    [controlName]="'summer'"
                     [label]="'Summer holidays'"
                     (handleChange)="
                       toggleRequiredFromOthers([
@@ -183,7 +190,7 @@ type MyForm = {
                   [formGroup]="formExample.controls.winter"
                 >
                   <fudis-checkbox
-                    [controlName]="'winter1'"
+                    [controlName]="'winter'"
                     [label]="'Winter holidays'"
                     (handleChange)="
                       toggleRequiredFromOthers([
@@ -198,7 +205,7 @@ type MyForm = {
                   [formGroup]="formExample.controls.working"
                 >
                   <fudis-checkbox
-                    [controlName]="'working1'"
+                    [controlName]="'working'"
                     [label]="'Working holidays'"
                     (handleChange)="
                       toggleRequiredFromOthers([
@@ -280,21 +287,21 @@ export class StorybookExampleDynamicValidatorsComponent {
         null,
         this._requiredValidatorInstance,
       ),
-      summer: new FormGroup<FudisCheckboxGroupFormGroup<object>>(
+      summer: new FormGroup<SummerCheckbox>(
         {
-          summer1: new FormControl(null),
+          summer: new FormControl(null),
         },
         this._oneRequiredValidatorInstance,
       ),
-      winter: new FormGroup<FudisCheckboxGroupFormGroup<object>>(
+      winter: new FormGroup<WinterCheckbox>(
         {
-          winter1: new FormControl(null),
+          winter: new FormControl(null),
         },
         this._oneRequiredValidatorInstance,
       ),
-      working: new FormGroup<FudisCheckboxGroupFormGroup<object>>(
+      working: new FormGroup<WorkingCheckbox>(
         {
-          working1: new FormControl(null),
+          working: new FormControl(null),
         },
         this._oneRequiredValidatorInstance,
       ),
@@ -467,7 +474,7 @@ export class StorybookExampleDynamicValidatorsComponent {
     }
   }
 
-  toggleRequiredFromOthers(removeControls: FormGroup<FudisCheckboxGroupFormGroup<object>>[]): void {
+  toggleRequiredFromOthers(removeControls: FormGroup[]): void {
     removeControls.forEach((control) => {
       const required = control.hasValidator(this._oneRequiredValidatorInstance);