Fix Request Deletion modal not validating mandatory fields on submit and ensure errors display immediately

angular.json

@@ -57,7 +57,7 @@
                 {
                   "type": "anyComponentStyle",
                   "maximumWarning": "2kB",
-                  "maximumError": "6kB"
+                  "maximumError": "8kB"
                 }
               ],
               "outputHashing": "all"

src/app/components/request-deletion-dialog/request-deletion-dialog.component.html

@@ -13,9 +13,13 @@ <h2 mat-dialog-title>{{ data.componentName }} - Deletion Form</h2>
         <span>Mandatory</span>
     </div>
 
-    <mat-radio-group [(ngModel)]="deploymentStatus" class="deployment-status-group">
+    <mat-radio-group [(ngModel)]="deploymentStatus" required class="deployment-status-group" #deploymentStatusInput="ngModel">
         <mat-radio-button [value]="true">It is deployed in QA/Prod</mat-radio-button>
         <mat-radio-button [value]="false">It is in DEV or not deployed</mat-radio-button>
+
+        <mat-error *ngIf="deploymentStatusInput.touched && deploymentStatusInput.errors?.['required']">
+            This field is mandatory
+        </mat-error>
     </mat-radio-group>
 
     <div *ngIf="deploymentStatus" class="change-request-section">

src/app/components/request-deletion-dialog/request-deletion-dialog.component.scss

@@ -67,6 +67,17 @@ app-request-deletion-dialog {
                 --mat-radio-label-text-color: var(--appshell-color-dark-green-main)!important;
                 --mat-radio-label-text-size: 14px;
             }
+
+            &.ng-invalid.ng-touched mat-radio-button {
+                --mdc-radio-unselected-icon-color: #E10A0A!important;
+            }
+
+            mat-error {
+                line-height: var(--mat-form-field-subscript-text-line-height);
+                font-size: var(--mat-form-field-subscript-text-size);
+                letter-spacing: var(--mat-form-field-subscript-text-tracking);
+                font-weight: var(--mat-form-field-subscript-text-weight);
+            }
         }
 
         .change-request-section {

src/app/components/request-deletion-dialog/request-deletion-dialog.component.ts

@@ -1,11 +1,11 @@
-import { Component, Inject, ViewEncapsulation } from '@angular/core';
+import { Component, Inject, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatRadioModule } from '@angular/material/radio';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, NgModel } from '@angular/forms';
 import { RequestDeletionDialogData, RequestDeletionDialogResult } from '../../models/request-deletion-dialog-data';
 import { AppShellIconComponent } from '@opendevstack/ngx-appshell';
 
@@ -29,6 +29,8 @@ import { AppShellIconComponent } from '@opendevstack/ngx-appshell';
 })
 export class RequestDeletionDialogComponent {
 
+  @ViewChildren(NgModel) controls!: QueryList<NgModel>;
+
   deploymentStatus: boolean | undefined = undefined;
   changeNumber: string = '';
   reason: string = '';
@@ -41,6 +43,7 @@ export class RequestDeletionDialogComponent {
   ) {}
 
   onAccept(): void {
+    this.controls.forEach(c => c.control.markAsTouched());
     if (this.deploymentStatus === undefined) {
       return;
     }