feat(client): migrate to form control

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"
+    (click)="dialogRef.close(formControl.value)"
+  >
     {{ confirmLabel }}
   </button>
 </div>