feat: simplify multiselect and make reusable

Author: fmalcher

src/app/multiselect/multiselect.html

@@ -4,16 +4,16 @@
   </summary>
   @if (!disabled()) {
     <ul>
-      @for (topic of allTopics; track $index) {
+      @for (option of selectOptions(); track $index) {
         <li>
           <label>
             <input
               type="checkbox"
-              [name]="topic"
-              [checked]="value().includes(topic)"
-              (input)="changeInput(topic, $event)"
+              [name]="option"
+              [checked]="value().includes(option)"
+              (input)="changeInput(option, $event)"
             />
-            {{ topic }}
+            {{ option }}
           </label>
         </li>
       }

src/app/multiselect/multiselect.ts

@@ -8,21 +8,21 @@ import { FormValueControl, ValidationError, WithOptionalField } from '@angular/f
   styleUrl: './multiselect.scss',
 })
 export class Multiselect implements FormValueControl<string[]> {
-  readonly allTopics = ['Angular', 'Vue', 'React'];
   readonly value = model<string[]>([]);
-  readonly label = input.required<string>();
   readonly errors = input<readonly WithOptionalField<ValidationError>[]>([]);
   readonly disabled = input<boolean>(false);
 
-  changeInput(topic: string, e: Event) {
+  readonly label = input.required<string>();
+  readonly selectOptions = input.required<string[]>();
+
+  changeInput(option: string, e: Event) {
     const checked = (e.target as HTMLInputElement).checked;
-    const isInModel = this.value().includes(topic) && checked;
-    if (!isInModel && checked) {
-      this.value.update((current) => [...current, topic]);
-      return;
-    }
-    if (!checked) {
-      this.value.update((current) => current.filter((t) => t !== topic));
+    if (checked) {
+      // option checked, add to list
+      this.value.update((current) => [...current, option]);
+    } else {
+      // option unchecked, remove from list
+      this.value.update((current) => current.filter((o) => o !== option));
     }
   }
 

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

@@ -88,6 +88,7 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
   </label>
   <app-multiselect
     [field]="registrationForm.newsletterTopics"
+    [selectOptions]="['Angular', 'React', 'Vue', 'Svelte']"
     label="Topics (multiple possible):"
   />
   <app-form-error [fieldRef]="registrationForm.newsletterTopics" />

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

@@ -25,7 +25,7 @@ const initialState: RegisterFormData = {
   age: 18,
   password: { pw1: '', pw2: '' },
   email: [''],
-  newsletter: false,
+  newsletter: true,
   newsletterTopics: ['Angular'],
   agreeToTermsAndConditions: false,
 };