根据用户从下拉列表中所做的选择填充表单字段

Question

我正在尝试为用户创建 'name' 编辑器。因此，用户将 select 通过他们希望编辑的下拉菜单输入系统中的现有名称，一旦他们 select 编辑了它，两个输入字段将填充现有的名字和姓氏以及用户可以编辑它们。我正在努力研究如何使用下拉列表中 select 编辑的内容填充这两个输入字段。

names: Name[] = [
   {
      firstName: 'firstname',
      lastName: 'lastname'
   },
   {
      firstName: 'firstname2',
      lastName: 'lastname2'
];

.ts
export class NameEditor {
   selected: Name;

   firstName = new FormControl();
   lastName = new FormControl();
}

.html
<mat-form-field>
   <mat-select [(ngModel)]="selected">
      <mat-option *ngFor="let name of names" [value]="name">{{ name.firstName }}</mat-option>
   </mat-select>
</mat-form-field>

<mat-form-field>
   // Where I want the two input fields filled with firstName and lastName

   <input matInput type="text" [value]="selected.firstName" [(ngModel)]="firstName"/>
</mat-form-field>

目前看起来是这样的。所以 select 或 select 是一个包含名字和姓氏的 'name' 对象，然后我想将这些值推入两种形式。当前的方式是为输入字段返回错误，因为“selected.firstName”未定义。任何帮助将不胜感激

Answer 1

一切看起来都很好，除了您可能在未进行选择时将空值绑定到表单控件这一事实 - 这可能会破坏呈现。

我建议在 mat-form-field 上使用 *ngIf 指令来检测何时做出选择：

<mat-form-field *ngIf="!!selected">
    ....
</mat-form-field>

根据用户从下拉列表中所做的选择填充表单字段

Populating form fields based on a selection made by user from a dropdown

angular

angular-forms