add form to edit employee

Reviewed-on: #23
Reviewed-by: Get in my car i have candy <huydw@proton.me>
This commit is contained in:
2025-01-09 11:10:51 +00:00
parent b0009229d1
commit 176074fbdc
9 changed files with 139 additions and 10 deletions

View File

@ -0,0 +1,68 @@
import {Component, inject, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
import {
MAT_DIALOG_DATA,
MatDialogActions,
MatDialogClose,
MatDialogContent,
MatDialogRef,
MatDialogTitle
} from "@angular/material/dialog";
import {NgIf} from "@angular/common";
import {MatFormField} from "@angular/material/form-field";
import {MatInput, MatLabel} from "@angular/material/input";
import {MatButton} from "@angular/material/button";
import {Employee} from "../Employee";
import EmployeeApiService from "../../services/employee-api.service";
@Component({
selector: 'app-edit',
imports: [
MatDialogTitle,
MatDialogContent,
NgIf,
ReactiveFormsModule,
MatFormField,
MatInput,
MatDialogActions,
MatButton,
MatDialogClose,
MatLabel
],
templateUrl: './edit.component.html',
standalone: true,
styleUrl: './edit.component.css'
})
export class EditComponent implements OnInit {
employeeForm: FormGroup | null = null;
formBuilder: FormBuilder = inject(FormBuilder);
employeeService: EmployeeApiService = inject(EmployeeApiService);
dialogRef: MatDialogRef<EditComponent> = inject(MatDialogRef);
employee: Employee = inject(MAT_DIALOG_DATA);
ngOnInit(): void {
this.employeeForm = this.formBuilder.group({
firstName: [this.employee.firstName, Validators.required],
lastName: [this.employee.lastName, Validators.required],
street: [this.employee.street, Validators.required],
postcode: [this.employee.postcode, [Validators.required, Validators.minLength(5), Validators.maxLength(5)]],
city: [this.employee.city, Validators.required],
phone: [this.employee.phone, Validators.required],
});
}
submit() {
if (this.employeeForm === null || !this.employeeForm.valid) {
console.error('Form invalid');
return;
}
if (this.employee.id === undefined) {
console.error('Employee ID is undefined');
return;
}
this.employeeService.update(this.employeeForm.value as Employee, this.employee.id).subscribe();
this.dialogRef.close();
}
}