From 923e3edb1259a0178723d07e855193c817c09cb4 Mon Sep 17 00:00:00 2001
From: Kenrick Tandrian <60643640+KenTandrian@users.noreply.github.com>
Date: Sat, 16 Aug 2025 00:45:39 +0700
Subject: [PATCH] Task/migrate prompt dialog component from ngModel to form
 control (#5364)

* Migrate prompt dialog component from ngModel to form control

* Update changelog
---
 CHANGELOG.md                                           |  6 ++++++
 .../prompt-dialog/prompt-dialog.component.ts           | 10 +++++-----
 .../core/notification/prompt-dialog/prompt-dialog.html |  9 +++++++--
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c1e38d81d..2d84426e2 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/apps/client/src/app/core/notification/prompt-dialog/prompt-dialog.component.ts b/apps/client/src/app/core/notification/prompt-dialog/prompt-dialog.component.ts
index 6c8af4197..6ea68d863 100644
--- a/apps/client/src/app/core/notification/prompt-dialog/prompt-dialog.component.ts
+++ b/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;
   }
 }
diff --git a/apps/client/src/app/core/notification/prompt-dialog/prompt-dialog.html b/apps/client/src/app/core/notification/prompt-dialog/prompt-dialog.html
index 5568cfdae..d73c8dabb 100644
--- a/apps/client/src/app/core/notification/prompt-dialog/prompt-dialog.html
+++ b/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>