In my Angular 5 project, I am facing some issues. I have two models called Person and Employee where Employee inherits from Person and has its own attributes. In the HTML file of my component, I created a form with several input fields:
<input type="text" name="name" [(ngModel)]="person.name" />
<input type="text" name="numberPhone" [(ngModel)]="person.numberPhone" />
<button (click)="isEmployee=true" type="button">Is employee</button>
<div *ngIf="isEmployee">
<input type="text" name="salary" [(ngModel)]="employee.salary" />
</div>
The issue arises when I try to use the same form to bind person if isEmployee is false or employee if isEmployee is true. The following code snippet does not yield the desired result:
[(ngMode)]="isEmployee ? person.name : employee.name"
[(ngMode)]="isEmployee ? person.numberPhone : employee.numberPhone "
Is there a way to achieve this without repeating the HTML code?