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:
68
src/app/employee/edit/edit.component.ts
Normal file
68
src/app/employee/edit/edit.component.ts
Normal 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();
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user