I am having trouble capturing the result of the Employee object. I have defined an Employee object and tried to capture its values using [ngModel], but I am getting empty results. Can someone please assist me in resolving this issue?
Employee.ts
import {IEmployee} from "../_interfaces/IEmployee";
import {ISalary} from "../_interfaces/ISalary";
import {IDesignation} from "../_interfaces/IDesignation";
export class Employee implements IEmployee {
public birth_date: string;
public designations: IDesignation;
public emp_no: string;
public first_name: string;
public gender: string;
public hire_date: string;
public id: string;
public last_name: string;
public salaries: ISalary;
constructor(
birth_date: string,
designations: IDesignation,
emp_no: string,
first_name: string,
gender: string,
hire_date: string,
id: string,
last_name: string,
salaries: ISalary,
) {
this.birth_date = birth_date;
this.designations = designations;
this.emp_no = emp_no;
this.first_name = first_name;
this.gender = gender;
this.hire_date = hire_date;
this.id = id;
this.last_name = last_name;
this.salaries = salaries;
}
}
create.component.ts
export class CreateComponent implements OnInit {
public employee: Employee= {
birth_date: "",
designations: <Designations>{
id: '',
title: '',
emp_no: '',
from_date: '',
to_date: '',
},
emp_no: "",
first_name: "",
gender: "",
hire_date: "",
id: "",
last_name: "",
salaries: <Salary>{
id: "",
emp_no: "",
salary: "",
rom_date: "",
to_date: "",
},
};
constructor() {
}
ngOnInit(): void {
}
getValues(){
console.log(this.employee);
}
}
create.component.html
<label>First Name</label>
<input [ngModel]="employee.first_name" [ngModelOptions]="{standalone:true}" class="form-control" type="text">
<button class="btn btn-primary" (click)="getValues()">Save Entries</button>
Output
NULL