refactor(components-app): migrate to strictly typed Angular forms

SchweizerischeBundesbahnen · Jul 19, 2023 · 29e8517 · 29e8517
1 parent 0f858ac
commit 29e8517
Show file tree

Hide file tree

Showing 11 changed files with 135 additions and 159 deletions.
diff --git a/apps/components/src/app/sci-accordion-page/sci-accordion-page.component.html b/apps/components/src/app/sci-accordion-page/sci-accordion-page.component.html
@@ -5,19 +5,19 @@ <h1>sci-accordion (ɵ)</h1>
     <header>Settings</header>
 
     <sci-form-field label="Variant">
-      <select [formControlName]="VARIANT">
+      <select [formControl]="form.controls.variant">
         <option value="solid">solid</option>
         <option value="bubble">bubble</option>
       </select>
     </sci-form-field>
 
     <sci-form-field label="Multi">
-      <sci-checkbox [formControlName]="MULTI"></sci-checkbox>
+      <sci-checkbox [formControl]="form.controls.multi"></sci-checkbox>
     </sci-form-field>
   </section>
 </form>
 
-<sci-accordion [variant]="form.get(VARIANT)!.value" [multi]="form.get(MULTI)!.value">
+<sci-accordion [variant]="form.controls.variant.value" [multi]="form.controls.multi.value">
   <ng-container *ngFor="let item of items">
     <!-- item -->
     <ng-template sciAccordionItem [panel]="panel">

diff --git a/apps/components/src/app/sci-accordion-page/sci-accordion-page.component.ts b/apps/components/src/app/sci-accordion-page/sci-accordion-page.component.ts
@@ -8,15 +8,12 @@
  *  SPDX-License-Identifier: EPL-2.0
  */
 import {Component} from '@angular/core';
-import {FormBuilder, FormGroup, ReactiveFormsModule} from '@angular/forms';
+import {NonNullableFormBuilder, ReactiveFormsModule} from '@angular/forms';
 import {NgFor} from '@angular/common';
 import {SciFormFieldComponent} from '@scion/components.internal/form-field';
 import {SciCheckboxComponent} from '@scion/components.internal/checkbox';
 import {SciAccordionComponent, SciAccordionItemDirective} from '@scion/components.internal/accordion';
 
-export const VARIANT = 'variant';
-export const MULTI = 'multi';
-
 @Component({
   selector: 'sci-accordion-page',
   templateUrl: './sci-accordion-page.component.html',
@@ -33,9 +30,10 @@ export const MULTI = 'multi';
 })
 export default class SciAccordionPageComponent {
 
-  public VARIANT = VARIANT;
-  public MULTI = MULTI;
-  public form: FormGroup;
+  public form = this._formBuilder.group({
+    variant: this._formBuilder.control<'solid' | 'bubble'>('bubble'),
+    multi: this._formBuilder.control(false),
+  });
 
   public items: Item[] = [
     {title: 'SCION', description: 'SCION provides fundamental building blocks for implementing a microfrontend architecture and facilitates the development of Angular web applications that require a complex workbench layout of multiple views and windows.'},
@@ -51,11 +49,7 @@ export default class SciAccordionPageComponent {
     {title: 'Angular Youtube Component', description: 'Angular component built on top of the YouTube Player API.'},
   ];
 
-  constructor(formBuilder: FormBuilder) {
-    this.form = formBuilder.group({
-      [VARIANT]: formBuilder.control('bubble'),
-      [MULTI]: formBuilder.control(false),
-    });
+  constructor(private _formBuilder: NonNullableFormBuilder) {
   }
 }
 

diff --git a/apps/components/src/app/sci-sashbox-page/sci-sashbox-page.component.html b/apps/components/src/app/sci-sashbox-page/sci-sashbox-page.component.html
@@ -1,16 +1,16 @@
 <h1>sci-sashbox</h1>
 
 <sci-sashbox [direction]="directionFormControl.value"
-             [style.--sci-sashbox-gap]="stylingFormGroup.get('--sci-sashbox-gap')!.value"
-             [style.--sci-sashbox-splitter-bgcolor]="stylingFormGroup.get('--sci-sashbox-splitter-bgcolor')!.value"
-             [style.--sci-sashbox-splitter-bgcolor_hover]="stylingFormGroup.get('--sci-sashbox-splitter-bgcolor_hover')!.value"
-             [style.--sci-sashbox-splitter-size]="stylingFormGroup.get('--sci-sashbox-splitter-size')!.value"
-             [style.--sci-sashbox-splitter-size_hover]="stylingFormGroup.get('--sci-sashbox-splitter-size_hover')!.value"
-             [style.--sci-sashbox-splitter-touch-target-size]="stylingFormGroup.get('--sci-sashbox-splitter-touch-target-size')!.value"
-             [style.--sci-sashbox-splitter-cross-axis-size]="stylingFormGroup.get('--sci-sashbox-splitter-cross-axis-size')!.value"
-             [style.--sci-sashbox-splitter-border-radius]="stylingFormGroup.get('--sci-sashbox-splitter-border-radius')!.value"
-             [style.--sci-sashbox-splitter-opacity_active]="stylingFormGroup.get('--sci-sashbox-splitter-opacity_active')!.value"
-             [style.--sci-sashbox-splitter-opacity_hover]="stylingFormGroup.get('--sci-sashbox-splitter-opacity_hover')!.value">
+             [style.--sci-sashbox-gap]="stylingFormGroup.controls['--sci-sashbox-gap']"
+             [style.--sci-sashbox-splitter-bgcolor]="stylingFormGroup.controls['--sci-sashbox-splitter-bgcolor'].value"
+             [style.--sci-sashbox-splitter-bgcolor_hover]="stylingFormGroup.controls['--sci-sashbox-splitter-bgcolor_hover'].value"
+             [style.--sci-sashbox-splitter-size]="stylingFormGroup.controls['--sci-sashbox-splitter-size'].value"
+             [style.--sci-sashbox-splitter-size_hover]="stylingFormGroup.controls['--sci-sashbox-splitter-size_hover'].value"
+             [style.--sci-sashbox-splitter-touch-target-size]="stylingFormGroup.controls['--sci-sashbox-splitter-touch-target-size'].value"
+             [style.--sci-sashbox-splitter-cross-axis-size]="stylingFormGroup.controls['--sci-sashbox-splitter-cross-axis-size'].value"
+             [style.--sci-sashbox-splitter-border-radius]="stylingFormGroup.controls['--sci-sashbox-splitter-border-radius'].value"
+             [style.--sci-sashbox-splitter-opacity_active]="stylingFormGroup.controls['--sci-sashbox-splitter-opacity_active'].value"
+             [style.--sci-sashbox-splitter-opacity_hover]="stylingFormGroup.controls['--sci-sashbox-splitter-opacity_hover'].value">
   <ng-container *ngFor="let sash of sashes; index as i;">
     <ng-template sciSash *ngIf="sash.visible" [size]="sash.size" [minSize]="sash.minSize">
       <section class="sash-{{i + 1}}">Sash {{i + 1}}</section>
@@ -54,34 +54,34 @@ <h1>sci-sashbox</h1>
   <header>Styling</header>
 
   <sci-form-field label="--sci-sashbox-gap" direction="column">
-    <input formControlName="--sci-sashbox-gap">
+    <input [formControl]="stylingFormGroup.controls['--sci-sashbox-gap']">
   </sci-form-field>
   <sci-form-field label="--sci-sashbox-splitter-bgcolor" direction="column">
-    <input formControlName="--sci-sashbox-splitter-bgcolor">
+    <input [formControl]="stylingFormGroup.controls['--sci-sashbox-splitter-bgcolor']">
   </sci-form-field>
   <sci-form-field label="--sci-sashbox-splitter-bgcolor_hover" direction="column">
-    <input formControlName="--sci-sashbox-splitter-bgcolor_hover">
+    <input [formControl]="stylingFormGroup.controls['--sci-sashbox-splitter-bgcolor_hover']">
   </sci-form-field>
   <sci-form-field label="--sci-sashbox-splitter-size" direction="column">
-    <input formControlName="--sci-sashbox-splitter-size">
+    <input [formControl]="stylingFormGroup.controls['--sci-sashbox-splitter-size']">
   </sci-form-field>
   <sci-form-field label="--sci-sashbox-splitter-size_hover" direction="column">
-    <input formControlName="--sci-sashbox-splitter-size_hover">
+    <input [formControl]="stylingFormGroup.controls['--sci-sashbox-splitter-size_hover']">
   </sci-form-field>
   <sci-form-field label="--sci-sashbox-splitter-touch-target-size" direction="column">
-    <input formControlName="--sci-sashbox-splitter-touch-target-size">
+    <input [formControl]="stylingFormGroup.controls['--sci-sashbox-splitter-touch-target-size']">
   </sci-form-field>
   <sci-form-field label="--sci-sashbox-splitter-cross-axis-size" direction="column">
-    <input formControlName="--sci-sashbox-splitter-cross-axis-size">
+    <input [formControl]="stylingFormGroup.controls['--sci-sashbox-splitter-cross-axis-size']">
   </sci-form-field>
   <sci-form-field label="--sci-sashbox-splitter-border-radius" direction="column">
-    <input formControlName="--sci-sashbox-splitter-border-radius">
+    <input [formControl]="stylingFormGroup.controls['--sci-sashbox-splitter-border-radius']">
   </sci-form-field>
   <sci-form-field label="--sci-sashbox-splitter-opacity_active" direction="column">
-    <input formControlName="--sci-sashbox-splitter-opacity_active">
+    <input [formControl]="stylingFormGroup.controls['--sci-sashbox-splitter-opacity_active']">
   </sci-form-field>
   <sci-form-field label="--sci-sashbox-splitter-opacity_hover" direction="column">
-    <input formControlName="--sci-sashbox-splitter-opacity_hover">
+    <input [formControl]="stylingFormGroup.controls['--sci-sashbox-splitter-opacity_hover']">
   </sci-form-field>
 </section>
 

diff --git a/apps/components/src/app/sci-sashbox-page/sci-sashbox-page.component.ts b/apps/components/src/app/sci-sashbox-page/sci-sashbox-page.component.ts
@@ -8,7 +8,7 @@
  *  SPDX-License-Identifier: EPL-2.0
  */
 import {Component, ElementRef, HostListener, OnInit, ViewChild} from '@angular/core';
-import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {FormsModule, NonNullableFormBuilder, ReactiveFormsModule} from '@angular/forms';
 import {SciSashboxComponent, SciSashDirective} from '@scion/components/sashbox';
 import {NgFor, NgIf} from '@angular/common';
 import {SciFormFieldComponent} from '@scion/components.internal/form-field';
@@ -32,18 +32,18 @@ import {SciCheckboxComponent} from '@scion/components.internal/checkbox';
 })
 export default class SciSashboxPageComponent implements OnInit {
 
-  public directionFormControl = new FormControl<'column' | 'row'>('row', {nonNullable: true});
-  public stylingFormGroup = new FormGroup({
-    '--sci-sashbox-gap': new FormControl(''),
-    '--sci-sashbox-splitter-bgcolor': new FormControl(''),
-    '--sci-sashbox-splitter-bgcolor_hover': new FormControl(''),
-    '--sci-sashbox-splitter-size': new FormControl(''),
-    '--sci-sashbox-splitter-size_hover': new FormControl(''),
-    '--sci-sashbox-splitter-touch-target-size': new FormControl(''),
-    '--sci-sashbox-splitter-cross-axis-size': new FormControl(''),
-    '--sci-sashbox-splitter-border-radius': new FormControl(''),
-    '--sci-sashbox-splitter-opacity_active': new FormControl(''),
-    '--sci-sashbox-splitter-opacity_hover': new FormControl(''),
+  public directionFormControl = this._formBuilder.control<'column' | 'row'>('row');
+  public stylingFormGroup = this._formBuilder.group({
+    '--sci-sashbox-gap': this._formBuilder.control(''),
+    '--sci-sashbox-splitter-bgcolor': this._formBuilder.control(''),
+    '--sci-sashbox-splitter-bgcolor_hover': this._formBuilder.control(''),
+    '--sci-sashbox-splitter-size': this._formBuilder.control(''),
+    '--sci-sashbox-splitter-size_hover': this._formBuilder.control(''),
+    '--sci-sashbox-splitter-touch-target-size': this._formBuilder.control(''),
+    '--sci-sashbox-splitter-cross-axis-size': this._formBuilder.control(''),
+    '--sci-sashbox-splitter-border-radius': this._formBuilder.control(''),
+    '--sci-sashbox-splitter-opacity_active': this._formBuilder.control(''),
+    '--sci-sashbox-splitter-opacity_hover': this._formBuilder.control(''),
   });
 
   public sashes: Sash[] = [
@@ -57,6 +57,9 @@ export default class SciSashboxPageComponent implements OnInit {
   @ViewChild(SciSashboxComponent, {static: true, read: ElementRef})
   public sashBoxComponent!: ElementRef<HTMLElement>;
 
+  constructor(private _formBuilder: NonNullableFormBuilder) {
+  }
+
   public ngOnInit(): void {
     // Set CSS variable default values.
     Object.entries(this.stylingFormGroup.controls).forEach(([key, formControl]) => {

diff --git a/apps/components/src/app/sci-tabbar-page/sci-tabbar-page.component.html b/apps/components/src/app/sci-tabbar-page/sci-tabbar-page.component.html
@@ -2,14 +2,14 @@ <h1>sci-tabbar (ɵ)</h1>
 
 <sci-tabbar>
   <!-- short content tab -->
-  <ng-template sciTab label="Short Content" name="Short Content" *ngIf="shortContentTabVisible.value">
+  <ng-template sciTab label="Short Content" name="Short Content" *ngIf="form.controls.shortContentTabVisible.value">
     <pre>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis tortor ante, et finibus nunc pellentesque sit amet. Morbi consectetur, lacus gravida egestas posuere, neque nulla sodales sapien, eu volutpat dolor dolor vitae dui. Curabitur vestibulum mi eget elit mollis, ut tristique urna faucibus. Duis iaculis pretium posuere. Duis dictum, lectus nec consectetur mattis, ipsum tellus placerat lacus, sed molestie ligula libero sed nisi. Duis interdum sagittis tellus. Nulla suscipit quis tortor eget accumsan. Ut euismod vehicula aliquet. Quisque cursus ultricies nunc, vitae finibus felis sodales sed. Nunc vitae urna et enim egestas dignissim. Morbi eleifend enim quis iaculis bibendum. Aenean ornare ipsum ut elit ornare dapibus.
     </pre>
   </ng-template>
 
   <!-- long content tab -->
-  <ng-template sciTab label="Long Content" name="Long Content" *ngIf="longContentTabVisible.value">
+  <ng-template sciTab label="Long Content" name="Long Content" *ngIf="form.controls.longContentTabVisible.value">
     <h3>Content should show in a viewport</h3>
     <pre>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis tortor ante, et finibus nunc pellentesque sit amet. Morbi consectetur, lacus gravida egestas posuere, neque nulla sodales sapien, eu volutpat dolor dolor vitae dui. Curabitur vestibulum mi eget elit mollis, ut tristique urna faucibus. Duis iaculis pretium posuere. Duis dictum, lectus nec consectetur mattis, ipsum tellus placerat lacus, sed molestie ligula libero sed nisi. Duis interdum sagittis tellus. Nulla suscipit quis tortor eget accumsan. Ut euismod vehicula aliquet. Quisque cursus ultricies nunc, vitae finibus felis sodales sed. Nunc vitae urna et enim egestas dignissim. Morbi eleifend enim quis iaculis bibendum. Aenean ornare ipsum ut elit ornare dapibus.
@@ -37,47 +37,49 @@ <h3>Content should show in a viewport</h3>
   </ng-template>
 
   <!-- textarea tab -->
-  <ng-template sciTab label="Textarea" name="Textarea" *ngIf="textareaTabVisible.value">
+  <ng-template sciTab label="Textarea" name="Textarea" *ngIf="form.controls.textareaTabVisible.value">
     <textarea placeholder="Enter some text. The text should be preserved when switching between tabs."></textarea>
   </ng-template>
 
   <!-- dynamic tabs -->
-  <ng-template sciTab *ngFor="let tab of dynamicTabs.value  | appSplit:','" [label]="tab" [name]="tab">
+  <ng-template sciTab *ngFor="let tab of form.controls.dynamicTabs.value  | appSplit:','" [label]="tab" [name]="tab">
     {{tab}}
   </ng-template>
 
 </sci-tabbar>
 
-<section class="settings">
-  <header>Tab Visibility</header>
+<form [formGroup]="form">
+  <section class="settings">
+    <header>Tab Visibility</header>
 
-  <sci-checkbox [formControl]="shortContentTabVisible"></sci-checkbox>
-  Display short content tab
+    <sci-checkbox [formControl]="form.controls.shortContentTabVisible"></sci-checkbox>
+    Display short content tab
 
-  <sci-checkbox [formControl]="longContentTabVisible"></sci-checkbox>
-  Display long content tab
+    <sci-checkbox [formControl]="form.controls.longContentTabVisible"></sci-checkbox>
+    Display long content tab
 
-  <sci-checkbox [formControl]="textareaTabVisible"></sci-checkbox>
-  Display textarea tab
-</section>
+    <sci-checkbox [formControl]="form.controls.textareaTabVisible"></sci-checkbox>
+    Display textarea tab
+  </section>
 
-<section class="settings">
-  <header>Dynamic Tabs</header>
+  <section class="settings">
+    <header>Dynamic Tabs</header>
 
-  <input [formControl]="dynamicTabs" placeholder="Comma-separated list of tabs">
-</section>
+    <input [formControl]="form.controls.dynamicTabs" placeholder="Comma-separated list of tabs">
+  </section>
 
-<section class="settings">
-  <header>Activate Tab</header>
+  <section class="settings">
+    <header>Activate Tab</header>
 
-  <sci-form-field label="Tab Name" direction="row">
-    <select [formControl]="selectedTabName">
-      <option value="Short Content">Short Content</option>
-      <option value="Long Content">Long Content</option>
-      <option value="Textarea">Textarea</option>
-      <option *ngFor="let tab of dynamicTabs.value  | appSplit:','" [value]="tab">{{tab}}</option>
-    </select>
-  </sci-form-field>
+    <sci-form-field label="Tab Name" direction="row">
+      <select [formControl]="form.controls.selectedTabName">
+        <option value="Short Content">Short Content</option>
+        <option value="Long Content">Long Content</option>
+        <option value="Textarea">Textarea</option>
+        <option *ngFor="let tab of form.controls.dynamicTabs.value  | appSplit:','" [value]="tab">{{tab}}</option>
+      </select>
+    </sci-form-field>
 
-  <button (click)="onActivateTab()">Activate</button>
-</section>
+    <button (click)="onActivateTab()">Activate</button>
+  </section>
+</form>
diff --git a/apps/components/src/app/sci-tabbar-page/sci-tabbar-page.component.scss b/apps/components/src/app/sci-tabbar-page/sci-tabbar-page.component.scss
@@ -11,7 +11,7 @@
     }
   }
 
-  > section.settings {
+  > form > section.settings {
     display: grid;
     grid-template-columns: min-content auto;
     gap: 1em;

diff --git a/apps/components/src/app/sci-tabbar-page/sci-tabbar-page.component.ts b/apps/components/src/app/sci-tabbar-page/sci-tabbar-page.component.ts
@@ -10,7 +10,7 @@
 
 import {Component, ViewChild} from '@angular/core';
 import {SciTabbarComponent, SciTabDirective} from '@scion/components.internal/tabbar';
-import {FormControl, ReactiveFormsModule} from '@angular/forms';
+import {NonNullableFormBuilder, ReactiveFormsModule} from '@angular/forms';
 import {SplitPipe} from '../common/split.pipe';
 import {SciCheckboxComponent} from '@scion/components.internal/checkbox';
 import {SciFormFieldComponent} from '@scion/components.internal/form-field';
@@ -34,16 +34,21 @@ import {NgFor, NgIf} from '@angular/common';
 })
 export default class SciTabbarPageComponent {
 
-  public shortContentTabVisible = new FormControl(true);
-  public longContentTabVisible = new FormControl(true);
-  public textareaTabVisible = new FormControl(true);
-  public dynamicTabs = new FormControl('Tab 1,Tab 2,Tab 3');
-  public selectedTabName = new FormControl();
+  public form = this._formBuilder.group({
+    shortContentTabVisible: this._formBuilder.control(true),
+    longContentTabVisible: this._formBuilder.control(true),
+    textareaTabVisible: this._formBuilder.control(true),
+    dynamicTabs: this._formBuilder.control('Tab 1,Tab 2,Tab 3'),
+    selectedTabName: this._formBuilder.control<string | undefined>(undefined),
+  });
 
   @ViewChild(SciTabbarComponent, {static: true})
   public tabbar!: SciTabbarComponent;
 
+  constructor(private _formBuilder: NonNullableFormBuilder) {
+  }
+
   public onActivateTab(): void {
-    this.tabbar.activateTab(this.selectedTabName.value);
+    this.tabbar.activateTab(this.form.controls.selectedTabName.value);
   }
 }
diff --git a/apps/components/src/app/sci-throbber-page/sci-throbber-page.component.html b/apps/components/src/app/sci-throbber-page/sci-throbber-page.component.html
@@ -5,7 +5,7 @@ <h1>sci-throbber</h1>
     <header>Settings</header>
 
     <sci-form-field label="Type" direction="column">
-      <select [formControlName]="TYPE">
+      <select [formControl]="form.controls.type">
         <option *ngFor="let type of types" [value]="type">{{type}}</option>
       </select>
     </sci-form-field>
@@ -15,21 +15,21 @@ <h1>sci-throbber</h1>
     <header>CSS Variables</header>
 
     <sci-form-field label="--sci-throbber-color" direction="column">
-      <input [formControlName]="COLOR">
+      <input [formControl]="form.controls.color">
     </sci-form-field>
 
     <sci-form-field label="--sci-throbber-size" direction="column">
-      <input [formControlName]="SIZE">
+      <input [formControl]="form.controls.size">
     </sci-form-field>
 
     <sci-form-field label="--sci-throbber-duration" direction="column">
-      <input [formControlName]="DURATION">
+      <input [formControl]="form.controls.duration">
     </sci-form-field>
   </section>
 </form>
 
-<sci-throbber [type]="form.get(TYPE)!.value"
-              [style.--sci-throbber-color]="form.get(COLOR)!.value"
-              [style.--sci-throbber-size]="form.get(SIZE)!.value"
-              [style.--sci-throbber-duration]="form.get(DURATION)!.value">
+<sci-throbber [type]="form.controls.type.value"
+              [style.--sci-throbber-color]="form.controls.color.value"
+              [style.--sci-throbber-size]="form.controls.size.value"
+              [style.--sci-throbber-duration]="form.controls.duration.value">
 </sci-throbber>