Basic input validation

Gyoo · Aug 22, 2024 · 0b82e64 · 0b82e64
1 parent 2d5f015
commit 0b82e64
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 13 deletions.
diff --git a/src/components/main/main.component.html b/src/components/main/main.component.html
@@ -1,4 +1,4 @@
-<form [formGroup]="group">
+<form [formGroup]="group" (submit)="addScore()">
   <fieldset class="flex space-around">
     <legend>Playstyle</legend>
     <label>
@@ -13,28 +13,28 @@
   <fieldset>
     <legend>Song information</legend>
     <label class="width">
-      Title
+      Title*
       <input type="text" autocomplete="off" name="songTitle" formControlName="title" ngxTypeahead [taList]="songs"
              taListItemLabel="label" [taListItemField]="['title', 'romajiTitle']" (taSelected)="onSelectedSong($event)"
              [value]="selectedSong?.title" placeholder="Start typing to select the song (romaji available for japanese text)">
     </label>
     @if (selectedSong) {
-      <fieldset class="flex space-around">
-        <legend>Difficulty</legend>
+      <fieldset class="flex space-around" [ngClass]="{'success': group.controls.difficulty.valid, 'danger': group.controls.difficulty.invalid}">
+        <legend>Difficulty*</legend>
         @for (chart of selectedSongCharts; track chart.difficulty) {
           <label>
-            <input type="radio" [value]="chart.difficulty" formControlName="difficulty">
+            <input type="radio" [value]="chart.difficulty" formControlName="difficulty" id="difficulty">
             {{ chart.difficulty }} ({{ chart.level }})
           </label>
         }
       </fieldset>
       <div class="flex">
         <label class="grow">
-          Score
+          Score*
           <input type="number" min="0" max="1000000" formControlName="score">
         </label>
         <label class="grow">
-          Lamp
+          Lamp*
           <select formControlName="lamp">
             <option>FAILED</option>
             <option>ASSIST</option>
@@ -47,7 +47,7 @@
           </select>
         </label>
         <label class="grow">
-          Time
+          Time*
           <input formControlName="time" type="datetime-local">
         </label>
         <label class="grow">
@@ -67,8 +67,8 @@
           </select>
         </label>
       </div>
-      <fieldset class="flex" formGroupName="judgements">
-        <legend>Judgements (optional)</legend>
+      <fieldset class="flex" formGroupName="judgements" [ngClass]="{'success': group.controls.judgements.valid, 'danger': group.controls.judgements.invalid}">
+        <legend>Judgements (optional, all or none)</legend>
         <label>
           MARVELOUS
           <input type="number" min="0" formControlName="marvelous">
@@ -95,7 +95,7 @@
         </label>
       </fieldset>
       <div>
-        <button (click)="addScore()">Add score</button>
+        <button type="submit" [disabled]="group.invalid">Add score</button>
       </div>
     }
   </fieldset>

diff --git a/src/components/main/main.component.ts b/src/components/main/main.component.ts
@@ -7,13 +7,16 @@ import {Score, TachiImport} from "../../model/TachiImport";
 import {pairwise, startWith} from "rxjs";
 import {isRomaji, tokenize, toRomaji} from "wanakana";
 import {NgxTypeAheadComponent} from "ngx-typeahead";
+import {allOrNoneRequiredValidator} from "../../validators/all-or-none.validator";
+import {NgClass} from "@angular/common";
 
 @Component({
   selector: 'app-main',
   standalone: true,
   imports: [
     ReactiveFormsModule,
     NgxTypeAheadComponent,
+    NgClass,
   ],
   templateUrl: './main.component.html',
   styleUrl: './main.component.css',
@@ -36,15 +39,15 @@ export class MainComponent {
     score: new FormControl(0, {nonNullable: true, validators: Validators.required}),
     lamp: new FormControl("CLEAR", Validators.required),
     flare: new FormControl(),
-    time: new FormControl(new Date().toISOString().slice(0, 16)),
+    time: new FormControl(new Date().toISOString().slice(0, 16), Validators.required),
     judgements: new FormGroup({
       marvelous: new FormControl(),
       perfect: new FormControl(),
       great: new FormControl(),
       good: new FormControl(),
       ok: new FormControl(),
       miss: new FormControl(),
-    })
+    }, allOrNoneRequiredValidator)
   });
 
   constructor(private route: ActivatedRoute) {
@@ -87,6 +90,7 @@ export class MainComponent {
 
   reset(){
     this.group.reset({
+      title: "",
       lamp: "CLEAR",
       score: 0,
       time: new Date().toISOString().slice(0, 16)

diff --git a/src/validators/all-or-none.validator.ts b/src/validators/all-or-none.validator.ts
@@ -0,0 +1,14 @@
+import {AbstractControl, FormGroup, ValidationErrors, ValidatorFn} from '@angular/forms';
+
+export const allOrNoneRequiredValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
+  if(control instanceof FormGroup){
+    const group = control as FormGroup;
+    const keys: string[] = Object.keys(group.controls);
+    const valid: boolean = keys.every((key: string): boolean => !!group.controls[key].value || group.controls[key].value === 0) ||
+      keys.every((key: string): boolean => !group.controls[key].value);
+    return valid ? null : { allOrNoneRequired: true };
+  }
+  else {
+    throw new TypeError("allOrNoneRequiredValidator should be applied to a FormGroup");
+  }
+};