Angular中如何根据combobox选中值自动填充关联文本框与下拉框

实现步骤 #

1. 模板代码修改 #

给mat-select（Aircraft Type控件）添加选中变更事件监听，修改后代码如下：

<mat-form-field appearance="outline" class="width-4">
  <mat-label>Aircraft Type (ICAO)</mat-label>
  <!-- 新增(selectionChange)事件绑定 -->
  <mat-select formControlName="aircraftType" required (selectionChange)="onAircraftTypeChange($event.value)">
    <mat-option *ngFor="let item of aircraftTypes" [value]="item.value">
      {{ item.label }}
    </mat-option>
  </mat-select>
</mat-form-field>
<br />
<mat-form-field appearance="outline" class="width-3">
  <mat-label>Number of Motors</mat-label>
  <input
    maxlength="50"
    matInput
    formControlName="numberMotors"
    placeholder="Number of Motors"
    required
  />
</mat-form-field>
<mat-form-field appearance="outline" class="width-3">
  <mat-label>Type of Motor</mat-label>
  <mat-select formControlName="typeMotors" required>
    <mat-option *ngFor="let item of motorTypes" [value]="item.value">
      {{ item.label }}
    </mat-option>
  </mat-select>
</mat-form-field>
<mat-form-field appearance="outline" class="width-3">
  <mat-label>MTOW (kg)</mat-label>
  <input
    maxlength="50"
    matInput
    formControlName="mtow"
    placeholder="MTOW"
    required
  />
</mat-form-field>

2. 组件类逻辑编写 #

在对应的.ts组件文件中添加选中事件处理函数，调用关联API获取数据后给对应表单控件赋值：

// 首先确保你已经注入了HttpClient和表单相关依赖
import { HttpClient } from '@angular/common/http';
import { FormGroup } from '@angular/forms';

// 组件类内部
export class YourComponent {
  // 替换为你实际的表单组变量名
  aircraftForm: FormGroup;
  motorTypes: any[] = [];

  constructor(private http: HttpClient) {}

  // 飞机类型选中事件处理
  onAircraftTypeChange(selectedAircraftTypeId: string | number) {
    // 调用API获取当前选中飞机类型的关联数据，替换为你的实际接口地址
    this.http.get(`/api/aircraft-type/detail/${selectedAircraftTypeId}`).subscribe({
      next: (res: any) => {
        // 给对应表单控件赋值，字段名请匹配你的接口返回结构
        this.aircraftForm.patchValue({
          numberMotors: res.numberOfMotors,
          mtow: res.mtow,
          typeMotors: res.motorTypeId
        });
        // 如果Type of Motor的下拉选项需要随飞机类型动态更新，就给motorTypes重新赋值
        this.motorTypes = res.motorTypeOptions || [];
      },
      error: (err) => {
        // 按需添加接口错误处理逻辑
        console.error('获取飞机类型关联数据失败', err);
      }
    })
  }
}

注意事项 #

• 请将上述代码中的接口地址、返回字段、表单组名称替换为你项目中的实际值
• 如果Type of Motor的下拉选项是全局固定的，不需要动态更新，可以省略给motorTypes赋值的逻辑

内容的提问来源于stack exchange，提问作者Rence Sacramento