Files
ems-frontend/src/app/create-qualification/create-qualification.component.ts
Huy fc6ea3b907 Implement error handling for the create qualification form (#19)
Co-authored-by: Phan Huy Tran <p.tran@neusta.de>
Reviewed-on: #19
Reviewed-by: Constantin Simonis <constantin@simonis.lol>
2025-01-08 10:31:38 +00:00

77 lines
2.4 KiB
TypeScript

import {Component, inject} from '@angular/core';
import {FormBuilder, ReactiveFormsModule, Validators} from "@angular/forms";
import QualificationService from "../services/qualification.service";
import {MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle} from "@angular/material/dialog";
import {NgIf} from "@angular/common";
import {MatError, MatFormField, MatLabel} from "@angular/material/form-field";
import {MatButton} from "@angular/material/button";
import {MatInput} from "@angular/material/input";
import {filter} from "rxjs";
@Component({
selector: 'app-create-qualification',
imports: [
ReactiveFormsModule,
MatError,
NgIf,
MatLabel,
MatDialogTitle,
MatDialogContent,
MatFormField,
MatDialogActions,
MatButton,
MatInput
],
templateUrl: './create-qualification.component.html',
styleUrl: './create-qualification.component.css'
})
export class CreateQualificationComponent {
private formBuilder: FormBuilder = inject(FormBuilder);
private qualificationService: QualificationService = inject(QualificationService);
private dialogRef: MatDialogRef<CreateQualificationComponent> = inject(MatDialogRef);
public apiErrorMessage: string = '';
qualificationForm = this.formBuilder.group({
'skill': ['', Validators.required],
});
isFieldInvalid(fieldName: string): boolean {
const field = this.qualificationForm.get(fieldName);
if (!field) {
throw new Error('Form field does not exist: ' + fieldName)
}
return field.invalid && (field.dirty || field.touched);
}
getErrorMessage(fieldName: string): string {
const field = this.qualificationForm.get(fieldName);
if (field?.errors?.['required']) {
return 'This field is required';
}
return '';
}
create() {
if (!this.qualificationForm.valid) {
console.error('Validation failed');
return;
}
this.qualificationService.create(this.qualificationForm.value).subscribe({
next: (createdQualification) => {
this.dialogRef.close(createdQualification);
},
error: (error) => {
console.error('Error creating qualification:', error);
this.apiErrorMessage = 'API Error';
}
});
}
}