Validate NHL draft year edits 1900-current year

src/app/app.module.ts

@@ -3,6 +3,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpClientModule } from '@angular/common/http';
 import { FormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 import { TieredMenuModule } from 'primeng/tieredmenu';
 
 import { AppRoutingModule } from './app-routing.module';
@@ -18,7 +19,7 @@ import { DialogModule } from 'primeng/dialog';
 
 @NgModule({
   declarations: [
-    AppComponent,
+    AppComponent
   ],
   imports: [
     BrowserModule,
@@ -30,6 +31,7 @@ import { DialogModule } from 'primeng/dialog';
     HttpClientModule,
     AppRoutingModule,
     FormsModule,
+    ReactiveFormsModule,
     NflModule,
     NbaModule,
     NhlModule,

src/app/common/validators/year-range.ts

@@ -0,0 +1,12 @@
+import { AbstractControl, ValidatorFn } from '@angular/forms';
+
+// Custom validator function to validate year range
+export function yearRangeValidator(minYear: number, maxYear: number): ValidatorFn {
+  return (control: AbstractControl): { [key: string]: any } | null => {
+    const value = control.value;
+    if (value && (value < minYear || value > maxYear)) {
+      return { 'yearRange': { min: minYear, max: maxYear } };
+    }
+    return null;
+  };
+}

src/app/nhl/components/roster/roster.component.html

@@ -49,53 +49,61 @@ <h2 class="NHL">National Hockey League - Team Rosters</h2>
     </ng-template>
   </p-table>
 
-  <p-dialog header="NHL Player Detail" [(visible)]="display" [modal]="true" [style]="{width: '50vw'}" [responsive]="true"
-    (onHide)="onDialogHide()">
-    <form (ngSubmit)="isAdding ? add() : save()">
+  <p-dialog header="NHL Player Detail" [(visible)]="display" [modal]="true" [style]="{width: '50vw'}"
+    [responsive]="true" (onHide)="onDialogHide()">
+    <form [formGroup]="nhlForm" (ngSubmit)="isAdding ? add() : save()">
       <div class="p-fluid">
         <div class="p-field">
           <label for="team">Team</label>
-          <input id="team" pInputText [(ngModel)]="selectedRow.team" name="team" />
+          <input id="team" pInputText formControlName="team" />
         </div>
         <div class="p-field">
           <label for="name">Name</label>
-          <input id="name" pInputText [(ngModel)]="selectedRow.name" name="name" />
+          <input id="name" pInputText formControlName="name" />
         </div>
         <div class="p-field">
           <label for="position">Position</label>
-          <input id="position" pInputText [(ngModel)]="selectedRow.position" name="position" />
+          <input id="position" pInputText formControlName="position" />
         </div>
         <div class="p-field">
           <label for="number">Number</label>
-          <input id="number" pInputText [(ngModel)]="selectedRow.number" name="number" />
+          <input id="number" pInputText formControlName="number" />
         </div>
         <div class="p-field">
           <label for="handed">Handed</label>
-          <input id="handed" pInputText [(ngModel)]="selectedRow.handed" name="handed" />
+          <input id="handed" pInputText formControlName="handed" />
         </div>
         <div class="p-field">
-          <label for="drafted">Drafted</label>
-          <input id="drafted" pInputText [(ngModel)]="selectedRow.drafted" name="drafted" />
+          <label for="drafted">Drafted Year</label>
+          <input id="drafted" pInputText formControlName="drafted" maxlength="4" />
+          <div *ngIf="nhlForm.get('drafted')?.invalid && nhlForm.get('drafted')?.touched">
+            <div class="field-error" *ngIf="nhlForm.get('drafted')?.errors?.['required']">Drafted Year is required.
+            </div>
+            <div class="field-error" *ngIf="nhlForm.get('drafted')?.errors?.['pattern']">Drafted Year must be a 4-digit
+              year.</div>
+            <div class="field-error" *ngIf="nhlForm.get('drafted')?.errors?.['yearRange']">Drafted Year must be between
+              1900 - Current Year.</div>
+          </div>
         </div>
         <div class="p-field">
           <label for="birthCountry">Birth Country</label>
-          <input id="birthCountry" pInputText [(ngModel)]="selectedRow.birthCountry" name="birthCountry" />
+          <input id="birthCountry" pInputText formControlName="birthCountry" />
         </div>
         <div class="p-field">
           <label for="birthPlace">Birth Place</label>
-          <input id="birthPlace" pInputText [(ngModel)]="selectedRow.birthPlace" name="birthPlace" />
+          <input id="birthPlace" pInputText formControlName="birthPlace" />
         </div>
         <div class="p-field">
           <label for="age">Age</label>
-          <input id="age" pInputText [(ngModel)]="selectedRow.age" name="age" />
+          <input id="age" pInputText formControlName="age" />
         </div>
         <div class="p-field">
           <label for="playerID">PlayerID</label>
-          <input id="playerID" readonly pInputText [(ngModel)]="selectedRow.playerID" name="playerID" />
+          <input id="playerID" readonly pInputText formControlName="playerID" />
         </div>
 
-        <button *ngIf="isAdding" title="Add" pButton type="submit" icon="pi pi-add" label="Add" (click)="add()">Add</button>
-        <button *ngIf="!isAdding" title="Save" pButton type="submit" icon="pi pi-save" label="Save" (click)="save()">Save</button>
+        <button *ngIf="isAdding" title="Add" pButton type="submit" icon="pi pi-add" label="Add">Add</button>
+        <button *ngIf="!isAdding" title="Save" pButton type="submit" icon="pi pi-save" label="Save">Save</button>
         <button title="Cancel" pButton type="button" icon="pi pi-cancel" (click)="hideDialog()"
           label="Cancel">Cancel</button>
       </div>

src/app/nhl/components/roster/roster.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
 import { NhlService } from '../../services/nhl.service';
 import { NHLRosterDto } from '../../services/nhl';
+import { yearRangeValidator } from 'src/app/common/validators/year-range';
 
 @Component({
   selector: 'sports-roster',
@@ -9,6 +11,7 @@ import { NHLRosterDto } from '../../services/nhl';
   ]
 })
 export class RosterComponent implements OnInit {
+  nhlForm!: FormGroup;
   roster: NHLRosterDto[] = [];
   isLoading: boolean = false;
   errMessage: string = "";
@@ -21,6 +24,24 @@ export class RosterComponent implements OnInit {
   ) { }
 
   ngOnInit(): void {
+    const currentYear = new Date().getFullYear();
+    this.nhlForm = new FormGroup({
+      team: new FormControl(''),
+      name: new FormControl(''),
+      position: new FormControl(''),
+      number: new FormControl(''),
+      handed: new FormControl(''),
+      drafted: new FormControl(null,
+        [Validators.required,
+        yearRangeValidator(1900, currentYear), // Use the custom validator
+        Validators.pattern('^[0-9]{4}$')]
+      ),
+      birthCountry: new FormControl(''),
+      birthPlace: new FormControl(''),
+      age: new FormControl(''),
+      playerID: new FormControl({ value: '', disabled: true })
+    });
+
     this.isLoading = true;
     this.loadRoster();
     this.isLoading = false;
@@ -29,6 +50,7 @@ export class RosterComponent implements OnInit {
   resetAction() {
     this.errMessage = "";
     this.isAdding = false;
+    this.nhlForm.reset();
   }
 
   loadRoster() {
@@ -51,6 +73,7 @@ export class RosterComponent implements OnInit {
   editRow(row: any) {
     this.resetAction();
     this.selectedRow = { ...row }; // Create a copy of the row to edit
+    this.setFormValues(row);
     this.display = true;
   }
 
@@ -61,33 +84,42 @@ export class RosterComponent implements OnInit {
   }
 
   save() {
-    this.nhlService.SaveRoster(this.selectedRow).subscribe({
-      next: data => {
-        console.log('Player saved successfully', data);
-        this.loadRoster(); // reload the grid
-        this.display = false;
-      },
-      error: error => {
-        console.error('There was an error saving the player!', error);
-        this.errMessage = "There was an error saving the player. Please try again.";
-        this.display = true;
-      }
-    })
+    if (this.nhlForm.valid) {
+      // Update the selectedRow with the form values
+      this.refreshSelectedRow();
+
+      this.nhlService.SaveRoster(this.selectedRow).subscribe({
+        next: data => {
+          console.log('Player saved successfully', data);
+          this.loadRoster(); // reload the grid
+          this.display = false;
+        },
+        error: error => {
+          console.error('There was an error saving the player!', error);
+          this.errMessage = "There was an error saving the player. Please try again.";
+          this.display = true;
+        }
+      });
+    }
   }
 
   add() {
-    this.nhlService.AddRoster(this.selectedRow).subscribe({
-      next: data => {
-        console.log('Player added successfully', data);
-        this.loadRoster(); // reload the grid
-        this.display = false;
-      },
-      error: error => {
-        console.error('There was an error adding the player!', error);
-        this.errMessage = "There was an error adding the player. Please try again.";
-        this.display = true;
-      }
-    })
+
+    if (this.nhlForm.valid) {
+
+      this.nhlService.AddRoster(this.nhlForm.value).subscribe({
+        next: data => {
+          console.log('Player added successfully', data);
+          this.loadRoster(); // reload the grid
+          this.display = false;
+        },
+        error: error => {
+          console.error('There was an error adding the player!', error);
+          this.errMessage = "There was an error adding the player. Please try again.";
+          this.display = true;
+        }
+      });
+    }
   }
 
   delete(playerID: string) {
@@ -118,5 +150,30 @@ export class RosterComponent implements OnInit {
   onDialogHide() {
     this.selectedRow = {}
   };
+
+  setFormValues(row: any) {
+
+    this.nhlForm.setValue({
+      team: row.team || '',
+      name: row.name || '',
+      position: row.position || '',
+      number: row.number || '',
+      handed: row.handed || '',
+      drafted: row.drafted || '',
+      birthCountry: row.birthCountry || '',
+      birthPlace: row.birthPlace || '',
+      age: row.age || '',
+      playerID: row.playerID || ''
+    });
+
+  }
+
+  refreshSelectedRow() {
+    this.selectedRow = {
+      ...this.nhlForm.value, // Get all the current form values
+      playerID: this.selectedRow.playerID
+    };
+  }
 }
 
+

src/app/nhl/nhl.module.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { TableModule } from 'primeng/table';
 import { DialogModule } from 'primeng/dialog';
 import { FormsModule } from '@angular/forms'; // Import FormsModule
+import { ReactiveFormsModule } from '@angular/forms'; // Import ReactiveFormsModule
 
 
 import { NhlRoutingModule } from './nhl-routing.module';
@@ -20,6 +21,7 @@ import { RosterComponent } from './components/roster/roster.component';
     TableModule,
     DialogModule,
     FormsModule,
+    ReactiveFormsModule,
     NhlRoutingModule
   ]
 })

src/styles.css

@@ -141,3 +141,10 @@ td.actions {
   align-items: center;
   justify-content: center;
 }
+
+/* Styling for field-specific errors */
+.field-error {
+  color: #d9534f;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}