diff --git a/package.json b/package.json
index f35eba88104..aa1dc532a4e 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,7 @@
     "@angular/cdk": "^15.2.9",
     "@angular/common": "15.2.9",
     "@angular/core": "^15.2.9",
-    "@angular/forms": "^15.2.9",
+    "@angular/forms": "^21.1.5",
     "@angular/localize": "^15.2.9",
     "@angular/material": "^15.2.9",
     "@angular/platform-browser": "^15.2.9",
diff --git a/tensorboard/webapp/settings/_views/settings_dialog_component.ts b/tensorboard/webapp/settings/_views/settings_dialog_component.ts
index 86f05043475..6462dcddf1d 100644
--- a/tensorboard/webapp/settings/_views/settings_dialog_component.ts
+++ b/tensorboard/webapp/settings/_views/settings_dialog_component.ts
@@ -55,15 +55,15 @@ export class SettingsDialogComponent implements OnInit, OnDestroy, OnChanges {
   @Output() pageSizeChanged = new EventEmitter<number>();
 
   readonly MIN_RELOAD_PERIOD_IN_S = MIN_RELOAD_PERIOD_IN_MS / 1000;
-  readonly reloadPeriodControl = new FormControl(this.MIN_RELOAD_PERIOD_IN_S, [
+  readonly reloadPeriodControl = new FormControl<number>(this.MIN_RELOAD_PERIOD_IN_S, [
     Validators.required,
     Validators.min(this.MIN_RELOAD_PERIOD_IN_S),
-  ]) as FormControl;
-  readonly paginationControl = new FormControl(1, [
+  ]);
+  readonly paginationControl = new FormControl<number>(1, [
     Validators.required,
     Validators.min(1),
     createIntegerValidator(),
-  ]) as FormControl;
+  ]);
 
   private ngUnsubscribe = new Subject<void>();