I followed a tutorial on YouTube that I came across here but I'm facing an issue with the Edit button not populating the fields on the left. Here are the relevant code snippets:
employee-list.component.html
<h6 class="text-center">Employee Register</h6><br>
<table class="table table-sm table-hover">
<tr *ngFor="let employee of employeeList">
<td>{{employee.name}}</td>
<td>{{employee.position}}</td>
<td>
<a class="btn" (click)="onEdit(employee)">
<i class="fa fa-pencil-square-o"></i>
</a>
<a class="btn" (click)="onDelete(employee.$key)">
<i class="fa fa-trash-o"></i>
</a>
</td>
</tr>
</table>
employee-list.component.ts
onEdit(emp : Employee){
this.employeeService.selectedEmployee = Object.assign({}, emp);
}
employee.service.ts
import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Employee } from './employee.model';
@Injectable()
export class EmployeeService {
employeeList : AngularFireList<any>;
selectedEmployee : Employee = new Employee();
constructor(private firebase : AngularFireDatabase) { }
getData(){
this.employeeList = this.firebase.list('employees');
return this.employeeList;
}
insertEmployee(employee : Employee){
this.employeeList.push({
name: employee.name,
position: employee.position,
office: employee.office,
salary: employee.salary
});
}
updateEmployee(employee : Employee){
this.employeeList.update(employee.$key,
{
name: employee.name,
position: employee.position,
office: employee.office,
salary: employee.salary
});
}
deleteEmployee($key : string){
this.employeeList.remove($key);
}
}
It seems like the onEdit() method is being called but it's not filling in the fields as expected. Any assistance on this matter would be highly appreciated.
employee.component.html
<form #employeeForm="ngForm" (ngSubmit)="onSubmit(employeeForm)">
<input type="hidden" name="$key" #$key="ngModel" [(ngModel)]="employeeService.selectedEmployee.$key">
<div class="form-group">
<label>Name</label>
<input class="form-control" name="name" #name="ngModel" [(ngModel)]="employeeService.name" placeholder="Full Name" required>
</div>
<div class="form-group">
<label>Position</label>
<input class="form-control" name="position" #name="ngModel" [(ngModel)]="employeeService.position" placeholder="Position">
</div>
<div class="form-group">
<label>Office</label>
<input class="form-control" name="office" #name="ngModel" [(ngModel)]="employeeService.office" placeholder="Office">
</div>
<div class="form-group">
<label>Salary</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-dollar"></i>
</div>
<input class="form-control" name="salary" #name="ngModel" [(ngModel)]="employeeService.salary" placeholder="Salary">
</div>
</div>
<div class="form-group">
<button class="btn btn-default" type="submit" [disabled]="!employeeForm.valid">
<i class="fa fa-floppy-o"></i>
Submit</button>
<button class="btn btn-default" type="button" (click)="resetForm(employeeForm)">
<i class="fa fa-repeat"></i>
Reset</button>
</div>
</form>
employee.component.ts
import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { EmployeeService } from '../shared/employee.service';
import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-employee',
templateUrl: './employee.component.html',
styleUrls: ['./employee.component.css']
})
export class EmployeeComponent implements OnInit {
constructor(private employeeService : EmployeeService, private tostr : ToastrService) { }
ngOnInit() {
this.resetForm();
}
onSubmit(employeeForm : NgForm){
if(employeeForm.value.$key == null)
this.employeeService.insertEmployee(employeeForm.value);
else
this.employeeService.updateEmployee(employeeForm.value);
this.resetForm(employeeForm);
this.tostr.success('Submitted Successfully', 'Employee Register');
}
resetForm(employeeForm? : NgForm){
if(employeeForm != null)
employeeForm.reset();
this.employeeService.selectedEmployee = {
$key : null,
name : '',
position : '',
office : '',
salary : 0
}
}
}