Imagine we have a list of names structured like this:
nameSelected: string;
names: Name[
{firstName: 'John', middleName: 'Danny', lastName: 'Smith'},
{firstName: 'Bob', middleName: 'Chris', lastName: 'Lopes'},
{firstName: 'Gary', middleName: 'Tom', lastName: 'Harrison'}
];
<mat-form-field appearence="fill">
<mat-label>First Name</mat-label>
<mat-select [(value)]="nameSelected">
<mat-option *ngFor="let name of Names" [value]="Name.firstName">{{Name.firstName}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Middle name" [value]="Name.middleName">{{Name.middleName}}/>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Last Name"[value]="Name.lastName">{{Name.lastName}}/>
</mat-form-field>
I aim to achieve that when I choose the first name from the dropdown, the other two input fields should automatically display the corresponding middle name and last name from the array.
For instance, if John is selected, then the middle name field will show Danny and the last name field will show Smith.