Altitude/AltitudeWeb
5
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor form validation and add user feedback with snackbar notifications in staff application form.

Browse Source
This commit is contained in:
akastijn 2025-10-12 21:57:40 +02:00
parent 0005b3b6d4
commit 91e5a2a9a0
2 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/pages/forms/staff-application/staff-application.component.html
View File

@ -284,7 +284,7 @@
</mat-form-field> </mat-form-field>
</div> </div>
<button mat-raised-button (click)="onSubmit()" <button mat-raised-button (click)="onSubmit()"
[disabled]="form.controls.previousExperience.invalid || form.controls.pluginExperience.invalid || form.controls.moderatorExpectations.invalid"> [disabled]="isFormInvalid()">
Submit Application Submit Application
</button> </button>
</section> </section>

9
frontend/src/app/pages/forms/staff-application/staff-application.component.ts
View File

@ -27,6 +27,7 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatDatepickerModule} from '@angular/material/datepicker'; import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatNativeDateModule} from '@angular/material/core'; import {MatNativeDateModule} from '@angular/material/core';
import {MatChipsModule} from '@angular/material/chips'; import {MatChipsModule} from '@angular/material/chips';
import {MatSnackBar} from '@angular/material/snack-bar';
@Component({ @Component({
selector: 'app-staff-application', selector: 'app-staff-application',
@ -51,6 +52,7 @@ import {MatChipsModule} from '@angular/material/chips';
export class StaffApplicationComponent implements OnInit, OnDestroy, AfterViewInit { export class StaffApplicationComponent implements OnInit, OnDestroy, AfterViewInit {
private mailService = inject(MailService); private mailService = inject(MailService);
private matSnackBar = inject(MatSnackBar);
public authService = inject(AuthService); public authService = inject(AuthService);
public staffApplicationService = inject(ApplicationsService) public staffApplicationService = inject(ApplicationsService)
private resizeObserver: ResizeObserver | null = null; private resizeObserver: ResizeObserver | null = null;
@ -215,6 +217,7 @@ export class StaffApplicationComponent implements OnInit, OnDestroy, AfterViewIn
public onSubmit() { public onSubmit() {
if (this.form === undefined) { if (this.form === undefined) {
console.error('Form is undefined'); console.error('Form is undefined');
this.matSnackBar.open('An error occurred, please try again later')
return return
} }
if (this.form.valid) { if (this.form.valid) {
@ -225,9 +228,15 @@ export class StaffApplicationComponent implements OnInit, OnDestroy, AfterViewIn
const control = this.form.get(field); const control = this.form.get(field);
control?.markAsTouched(); control?.markAsTouched();
}); });
this.matSnackBar.open('Please fill out all required fields')
} }
} }
isFormInvalid() {
return !this.form.valid
}
private router = inject(Router) private router = inject(Router)
private sendForm() { private sendForm() {