From 29e85177577069b243123d0b37f10b9023f6cb4a Mon Sep 17 00:00:00 2001 From: Marcarrian Date: Tue, 18 Jul 2023 16:53:41 +0200 Subject: [PATCH] refactor(components-app): migrate to strictly typed Angular forms --- .../sci-accordion-page.component.html | 6 +- .../sci-accordion-page.component.ts | 18 ++---- .../sci-sashbox-page.component.html | 40 ++++++------- .../sci-sashbox-page.component.ts | 29 +++++---- .../sci-tabbar-page.component.html | 60 ++++++++++--------- .../sci-tabbar-page.component.scss | 2 +- .../sci-tabbar-page.component.ts | 19 +++--- .../sci-throbber-page.component.html | 16 ++--- .../sci-throbber-page.component.ts | 33 ++++------ .../sci-viewport-page.component.html | 20 +++---- .../sci-viewport-page.component.ts | 51 ++++++---------- 11 files changed, 135 insertions(+), 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 index ce8b7840..155a1202 100644 --- 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 @@

sci-accordion (ɵ)

Settings
- - + - + 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 index 87324fd9..5fb4609e 100644 --- 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 index aad2928c..f91e2516 100644 --- 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 @@

sci-sashbox

+ [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">
Sash {{i + 1}}
@@ -54,34 +54,34 @@

sci-sashbox

Styling
- + - + - + - + - + - + - + - + - + - + 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 index 0260f560..bd4e270a 100644 --- 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; + 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 index b4352d9f..d09c9fde 100644 --- 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 @@

sci-tabbar (ɵ)

- + 
       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.
- +

Content should show in a viewport

       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 @@ 
Content should show in a viewport

   
 
   
-  
+  
     
   
 
   
-  
+  
     {{tab}}
   
 
 
 
-

-  
Tab Visibility

+

+  

+    
Tab Visibility

 
-  
-  Display short content tab
+    
+    Display short content tab
 
-  
-  Display long content tab
+    
+    Display long content tab
 
-  
-  Display textarea tab
-

+    
+    Display textarea tab
+  

 
-

-  
Dynamic Tabs

+  

+    
Dynamic Tabs

 
-  
-

+    
+  

 
-

-  
Activate Tab

+  

+    
Activate Tab

 
-  
-    
-  
+    
+      
+    
 
-  
-

+    
+  

+
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
index 9b4ca0ed..51aeaf9e 100644
--- 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
index 2f003731..584b0751 100644
--- 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(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
index 4d7135d5..a199bbb1 100644
--- 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 @@ 
sci-throbber

     
Settings

 
     
-      
         
       
     
@@ -15,21 +15,21 @@ 
sci-throbber

     
CSS Variables

 
     
-      
+      
     
 
     
-      
+      
     
 
     
-      
+      
     
   
 
 
-
+
 
diff --git a/apps/components/src/app/sci-throbber-page/sci-throbber-page.component.ts b/apps/components/src/app/sci-throbber-page/sci-throbber-page.component.ts
index 0905b184..f72f69a6 100644
--- a/apps/components/src/app/sci-throbber-page/sci-throbber-page.component.ts
+++ b/apps/components/src/app/sci-throbber-page/sci-throbber-page.component.ts
@@ -9,16 +9,11 @@
  */
 
 import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
-import {FormBuilder, FormGroup, ReactiveFormsModule} from '@angular/forms';
+import {NonNullableFormBuilder, ReactiveFormsModule} from '@angular/forms';
 import {SciThrobberComponent} from '@scion/components/throbber';
 import {SciFormFieldComponent} from '@scion/components.internal/form-field';
 import {NgFor} from '@angular/common';
 
-export const TYPE = 'type';
-export const COLOR = 'color';
-export const SIZE = 'size';
-export const DURATION = 'duration';
-
 @Component({
   selector: 'sci-throbber-page',
   templateUrl: './sci-throbber-page.component.html',
@@ -33,30 +28,24 @@ export const DURATION = 'duration';
 })
 export default class SciThrobberPageComponent implements OnInit {
 
-  public TYPE = TYPE;
-  public COLOR = COLOR;
-  public SIZE = SIZE;
-  public DURATION = DURATION;
-
   public types = ['ellipsis', 'ripple', 'roller', 'spinner'];
-  public form: FormGroup;
+  public form = this._formBuilder.group({
+    type: this._formBuilder.control<'ellipsis' | 'ripple' | 'roller' | 'spinner'>('spinner'),
+    color: this._formBuilder.control(''),
+    size: this._formBuilder.control(''),
+    duration: this._formBuilder.control(''),
+  });
 
   @ViewChild(SciThrobberComponent, {static: true, read: ElementRef})
   public throbberComponent!: ElementRef;
 
-  constructor(formBuilder: FormBuilder) {
-    this.form = formBuilder.group({
-      [TYPE]: formBuilder.control(undefined),
-      [COLOR]: formBuilder.control(undefined),
-      [SIZE]: formBuilder.control(undefined),
-      [DURATION]: formBuilder.control(undefined),
-    });
+  constructor(private _formBuilder: NonNullableFormBuilder) {
   }
 
   public ngOnInit(): void {
-    this.form.get(COLOR)!.setValue(this.readCssVariableDefault('--sci-throbber-color'));
-    this.form.get(SIZE)!.setValue(this.readCssVariableDefault('--sci-throbber-size'));
-    this.form.get(DURATION)!.setValue(this.readCssVariableDefault('--sci-throbber-duration'));
+    this.form.controls.color.setValue(this.readCssVariableDefault('--sci-throbber-color'));
+    this.form.controls.size.setValue(this.readCssVariableDefault('--sci-throbber-size'));
+    this.form.controls.duration.setValue(this.readCssVariableDefault('--sci-throbber-duration'));
   }
 
   private readCssVariableDefault(cssVariable: string): string {
diff --git a/apps/components/src/app/sci-viewport-page/sci-viewport-page.component.html b/apps/components/src/app/sci-viewport-page/sci-viewport-page.component.html
index 18cc17b4..44edaed8 100644
--- a/apps/components/src/app/sci-viewport-page/sci-viewport-page.component.html
+++ b/apps/components/src/app/sci-viewport-page/sci-viewport-page.component.html
@@ -4,26 +4,26 @@ 
sci-viewport

   

     
Content

 
-    
+    
   

 
   

     
sci-viewport::part(content)

 
-    
+    
   

 
   

     
Viewport Scrollbar

 
     
-      
         
       
     
 
     
-      
+      
     
   

 
@@ -31,22 +31,22 @@ 
sci-viewport

     
Viewport Style Properties

 
     
-      
+      
     
 
     
-      
+      
     
 
     
-      
+      
     
   
 
 
-
-  

+
+  

     {{content}}
   

 
diff --git a/apps/components/src/app/sci-viewport-page/sci-viewport-page.component.ts b/apps/components/src/app/sci-viewport-page/sci-viewport-page.component.ts
index 6648685b..32b290a9 100644
--- a/apps/components/src/app/sci-viewport-page/sci-viewport-page.component.ts
+++ b/apps/components/src/app/sci-viewport-page/sci-viewport-page.component.ts
@@ -9,7 +9,7 @@
  */
 
 import {Component, ElementRef, HostBinding, Inject, OnDestroy, OnInit, ViewChild} from '@angular/core';
-import {FormBuilder, FormGroup, ReactiveFormsModule} from '@angular/forms';
+import {NonNullableFormBuilder, ReactiveFormsModule} from '@angular/forms';
 import {SciViewportComponent} from '@scion/components/viewport';
 import {startWith, takeUntil} from 'rxjs/operators';
 import {Subject} from 'rxjs';
@@ -19,14 +19,6 @@ import {DOCUMENT, NgFor} from '@angular/common';
 import {SciFormFieldComponent} from '@scion/components.internal/form-field';
 import {SplitPipe} from '../common/split.pipe';
 
-export const VIEWPORT_CONTENT_STYLES = 'viewportContentStyles';
-export const VIEWPORT_MIN_HEIGHT = 'viewportMinHeight';
-export const VIEWPORT_MAX_HEIGHT = 'viewportMaxHeight';
-export const VIEWPORT_FLEX = 'viewportFlex';
-export const SCROLLBAR_PRESENTATION = 'scrollbarPresentation';
-export const SCROLLBAR_COLOR = 'scrollbarColor';
-export const CONTENT = 'content';
-
 @Component({
   selector: 'sci-viewport-page',
   templateUrl: './sci-viewport-page.component.html',
@@ -42,60 +34,51 @@ export const CONTENT = 'content';
 })
 export default class SciViewportPageComponent implements OnInit, OnDestroy {
 
-  public VIEWPORT_CONTENT_STYLES = VIEWPORT_CONTENT_STYLES;
-  public VIEWPORT_MIN_HEIGHT = VIEWPORT_MIN_HEIGHT;
-  public VIEWPORT_MAX_HEIGHT = VIEWPORT_MAX_HEIGHT;
-  public VIEWPORT_FLEX = VIEWPORT_FLEX;
-  public SCROLLBAR_PRESENTATION = SCROLLBAR_PRESENTATION;
-  public SCROLLBAR_COLOR = SCROLLBAR_COLOR;
-  public CONTENT = CONTENT;
-
   private _destroy$ = new Subject();
   private _styleSheet: CSSStyleSheet | null = null;
 
   public scrollbarStyles = ['native', 'on-top', 'hidden'];
-  public form: FormGroup;
+  public form = this._formBuilder.group({
+    viewportContentStyles: this._formBuilder.control(`display: grid;\ngrid-template-columns: 1fr 2fr 1fr;\ngap: 5em;\nbackground-color: ivory`),
+    viewportMinHeight: this._formBuilder.control('300px'),
+    viewportMaxHeight: this._formBuilder.control(''),
+    viewportFlex: this._formBuilder.control('1 1 0'),
+    scrollbarPresentation: this._formBuilder.control<'native' | 'on-top' | 'hidden'>('on-top'),
+    scrollbarColor: this._formBuilder.control(''),
+    content: this._formBuilder.control(loremIpsum),
+  });
 
   @ViewChild(SciViewportComponent, {static: true, read: ElementRef})
   public viewportElement!: ElementRef;
 
   @HostBinding('style.--viewport-minheight')
   public get viewportMinHeight(): string {
-    return this.form.get(this.VIEWPORT_MIN_HEIGHT)!.value;
+    return this.form.controls.viewportMinHeight.value;
   }
 
   @HostBinding('style.--viewport-maxheight')
   public get viewportMaxHeight(): string {
-    return this.form.get(this.VIEWPORT_MAX_HEIGHT)!.value;
+    return this.form.controls.viewportMaxHeight.value;
   }
 
   @HostBinding('style.--viewport-flex')
   public get viewportFlex(): string {
-    return this.form.get(this.VIEWPORT_FLEX)!.value;
+    return this.form.controls.viewportFlex.value;
   }
 
-  constructor(formBuilder: FormBuilder, @Inject(DOCUMENT) private _document: any) {
-    this.form = formBuilder.group({
-      [VIEWPORT_CONTENT_STYLES]: formBuilder.control(`display: grid;\ngrid-template-columns: 1fr 2fr 1fr;\ngap: 5em;\nbackground-color: ivory`),
-      [VIEWPORT_MIN_HEIGHT]: formBuilder.control('300px'),
-      [VIEWPORT_MAX_HEIGHT]: formBuilder.control(undefined),
-      [VIEWPORT_FLEX]: formBuilder.control('1 1 0'),
-      [SCROLLBAR_PRESENTATION]: formBuilder.control(undefined),
-      [SCROLLBAR_COLOR]: formBuilder.control(undefined),
-      [CONTENT]: formBuilder.control(loremIpsum),
-    });
+  constructor(private _formBuilder: NonNullableFormBuilder, @Inject(DOCUMENT) private _document: any) {
     this._styleSheet = this.installStyleSheet();
     this.applyViewportContentStylesOnStyleChange();
   }
 
   public ngOnInit(): void {
-    this.form.get(SCROLLBAR_COLOR)!.setValue(this.readCssVariableDefault('--sci-viewport-scrollbar-color'));
+    this.form.controls.scrollbarColor.setValue(this.readCssVariableDefault('--sci-viewport-scrollbar-color'));
   }
 
   private applyViewportContentStylesOnStyleChange(): void {
-    this.form.get(VIEWPORT_CONTENT_STYLES)!.valueChanges
+    this.form.controls.viewportContentStyles.valueChanges
       .pipe(
-        startWith(this.form.get(VIEWPORT_CONTENT_STYLES)!.value),
+        startWith(this.form.controls.viewportContentStyles.value),
         takeUntil(this._destroy$),
       )
       .subscribe((styles: string) => {