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>
</div>
<button mat-raised-button (click)="onSubmit()"
[disabled]="form.controls.previousExperience.invalid || form.controls.pluginExperience.invalid || form.controls.moderatorExpectations.invalid">
[disabled]="isFormInvalid()">
Submit Application
</button>
</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 {MatNativeDateModule} from '@angular/material/core';
import {MatChipsModule} from '@angular/material/chips';
import {MatSnackBar} from '@angular/material/snack-bar';
@Component({
selector: 'app-staff-application',
@ -51,6 +52,7 @@ import {MatChipsModule} from '@angular/material/chips';
export class StaffApplicationComponent implements OnInit, OnDestroy, AfterViewInit {
private mailService = inject(MailService);
private matSnackBar = inject(MatSnackBar);
public authService = inject(AuthService);
public staffApplicationService = inject(ApplicationsService)
private resizeObserver: ResizeObserver | null = null;
@ -215,6 +217,7 @@ export class StaffApplicationComponent implements OnInit, OnDestroy, AfterViewIn
public onSubmit() {
if (this.form === undefined) {
console.error('Form is undefined');
this.matSnackBar.open('An error occurred, please try again later')
return
}
if (this.form.valid) {
@ -225,9 +228,15 @@ export class StaffApplicationComponent implements OnInit, OnDestroy, AfterViewIn
const control = this.form.get(field);
control?.markAsTouched();
});
this.matSnackBar.open('Please fill out all required fields')
}
}
isFormInvalid() {
return !this.form.valid
}
private router = inject(Router)
private sendForm() {