Angular 8 зависимый выпадающий список для полей ввода

Question

Допустим, у нас есть массив имен, таких как:

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>

Что я хочу сделать, это когда я выбираю первое имя в поле, остальные 2 поля ввода будут заполнять середину имя и фамилия из этого массива.

Например, если я выберу Джона, в двух других полях ввода будет отчество Дэнни и отчество кузнеца в фамилии.

Answer 1

Вы предоставили ответ, который я искал, о том, как связать 3 блока вместе с именем экземпляра, поэтому я ценю это. Спасибо!

Answer 2

Вместо того, чтобы nameSelected в виде строки, это может быть экземпляр Name следующим образом, после чего вы получаете доступ к атрибуту имени, выбранного в 2 других тегах ввода. Также у вас есть небольшая синтаксическая ошибка при создании вашего массива:

.ts
// you create an instance of type Name
nameSelected: Name = {firstName: '', middleName: '', lastName: ''};
names: Name[] = [
    {firstName: 'John', middleName: 'Danny', lastName: 'Smith'}, 
    {firstName: 'Bob', middleName: 'Chris', lastName: 'Lopes'}, 
    {firstName: 'Gary', middleName: 'Tom', lastName: 'Harrison'}
];

.html
<mat-form-field appearence="fill">
        <mat-label>First Name</mat-label>
        <mat-select [(value)]="nameSelected">
       <mat-option *ngFor="let name of Names" [value]="name">{{name.firstName}}</mat-option>
        </mat-select>
    </mat-form-field> 

 <mat-form-field>  
      <input matInput placeholder="Middle name" [value]="nameSelected.middleName">
    </mat-form-field> 

 <mat-form-field>  
      <input matInput placeholder="Last Name" [value]="nameSelected.lastName">
    </mat-form-field>