Angular 15：下拉框变更时同步选中项的id与userIdentifier到文本框

步骤1：完善组件表单与监听逻辑 #

你的现有代码缺少响应式表单的初始化，以及下拉框选中值的监听逻辑。先修改component.ts，补全表单定义并添加值变更监听：

import { Component, OnInit, EventEmitter } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
// 请替换为你的CustomerService实际路径
import { CustomerService } from '../services/customer.service';

@Component({
  selector: 'app-customer-create',
  templateUrl: './customer-create.component.html',
  styleUrls: ['./customer-create.component.scss']
})
export class CustomerCreateComponent implements OnInit {

  isSubmitted = false;
  isLoading = false;
  userIdentifiers!: any[];
  event: EventEmitter<any> = new EventEmitter();
  // 定义表单组，包含三个字段
  customerForm!: FormGroup;

  constructor(
    private fb: FormBuilder,
    private toastr: ToastrService,
    // 注入CustomerService（之前代码漏了这个）
    private customerService: CustomerService
  ) {
    // 初始化表单
    this.customerForm = this.fb.group({
      id: [''],
      userIdentifier: [''],
      authId: ['', Validators.required]
    });
  }

  ngOnInit(): void {
    this.loadAllUserIdentifiers();
    // 监听下拉框选中值的变化
    this.setupAuthIdListener();
  }

  loadAllUserIdentifiers(){
    this.isLoading = true;
    this.customerService.getTransferAuthDropdown().subscribe({
      next: (res: any) => {
        this.userIdentifiers = res.data;
        this.isLoading = false;
      },
      error: () => {
        this.isLoading = false;
        this.toastr.error('加载用户选项失败');
      }
    })
  }

  // 监听authId控件的变化，同步更新输入框
  setupAuthIdListener(): void {
    this.customerForm.get('authId')?.valueChanges.subscribe(selectedId => {
      if (!selectedId) {
        // 下拉框清空时，同步清空两个输入框
        this.customerForm.patchValue({
          id: '',
          userIdentifier: ''
        });
        return;
      }
      // 根据选中的id找到对应的用户对象
      const selectedUser = this.userIdentifiers.find(user => user.id === selectedId);
      if (selectedUser) {
        // 用patchValue更新指定表单控件的值
        this.customerForm.patchValue({
          id: selectedUser.id,
          userIdentifier: selectedUser.userIdentifier
        });
      }
    });
  }
}

步骤2：修改模板绑定表单 #

在component.html中，将表单绑定到customerForm，并给输入框添加readonly防止手动修改：

<form [formGroup]="customerForm">
  <div class="col-md-3">
    <div class="form-group">
      <label for="id">id</label>
      <!-- 添加readonly，避免用户手动修改 -->
      <input type="text" class="form-control" formControlName='id' readonly>
    </div>
  </div>
  <div class="col-md-3">
    <div class="form-group">
      <label for="userIdentifier">userIdentifier</label>
      <input type="text" class="form-control" formControlName='userIdentifier' readonly>
    </div>
  </div>
  <div class="col-md-6">
    <div class="form-group">
      <label for="userIdentifier">User Identifier<span style="color:red;">*</span></label>
      <ng-select 
        [items]="userIdentifiers" 
        [selectOnTab]="true" 
        [searchable]="true" 
        bindValue="id" 
        bindLabel="userIdentifier" 
        placeholder="Select User Identifier" 
        [multiple]="false" 
        [clearable]="true" 
        required 
        formControlName="authId">
      </ng-select>
    </div>
  </div>
</form>

关键说明 #

1. 响应式表单监听：使用valueChanges监听下拉框控件的变化，是Angular响应式表单的最佳实践，能自动同步值的变更。
2. 清空处理：当下拉框清空时，同步清空两个输入框，避免数据不一致。
3. 只读输入框：给输入框加readonly，确保值完全由下拉框控制，防止用户手动修改。
4. 数据匹配：通过选中的id在userIdentifiers数组中找到完整的用户对象，从而获取对应的userIdentifier值。

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