Task/migrate prompt dialog component from ngModel to form control (#5364)

* Migrate prompt dialog component from ngModel to form control

* Update changelog

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Migrated the prompt dialog component from `ngModel` to form control
+
 ## 2.191.1 - 2025-08-14
 
 ### Added

apps/client/src/app/core/notification/prompt-dialog/prompt-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -7,11 +7,11 @@ import { MatInputModule } from '@angular/material/input';
 
 @Component({
   imports: [
-    FormsModule,
     MatButtonModule,
     MatDialogModule,
     MatFormFieldModule,
-    MatInputModule
+    MatInputModule,
+    ReactiveFormsModule
   ],
   selector: 'gf-prompt-dialog',
   templateUrl: './prompt-dialog.html'
@@ -20,8 +20,8 @@ export class GfPromptDialogComponent {
   public confirmLabel: string;
   public defaultValue: string;
   public discardLabel: string;
+  public formControl = new FormControl('');
   public title: string;
-  public value: string;
   public valueLabel: string;
 
   public constructor(public dialogRef: MatDialogRef<GfPromptDialogComponent>) {}
@@ -36,8 +36,8 @@ export class GfPromptDialogComponent {
     this.confirmLabel = aParams.confirmLabel;
     this.defaultValue = aParams.defaultValue;
     this.discardLabel = aParams.discardLabel;
+    this.formControl.setValue(aParams.defaultValue);
     this.title = aParams.title;
-    this.value = aParams.defaultValue;
     this.valueLabel = aParams.valueLabel;
   }
 }

apps/client/src/app/core/notification/prompt-dialog/prompt-dialog.html

@@ -7,7 +7,7 @@
     @if (valueLabel) {
       <mat-label>{{ valueLabel }}</mat-label>
     }
-    <input matInput [(ngModel)]="value" />
+    <input matInput [formControl]="formControl" />
   </mat-form-field>
 </div>
 
@@ -15,7 +15,12 @@
   <button mat-button (click)="dialogRef.close('discard')">
     {{ discardLabel }}
   </button>
-  <button color="primary" mat-flat-button (click)="dialogRef.close(value)">
+  <button
+    color="primary"
+    mat-flat-button
+    [disabled]="!(formControl.dirty && formControl.valid)"
+    (click)="dialogRef.close(formControl.value)"
+  >
     {{ confirmLabel }}
   </button>
 </div>