Angular如何根据select下拉框选中值自动填充对应关联字段的值

实现方案 #

你当前用的是Angular响应式表单，之前功能不生效通常是因为混用了ngModel和响应式表单API，或者change事件的取值、赋值逻辑有误，按下面步骤修改即可实现需求：

1. 调整模板代码，给下拉选择框添加change事件 #

<div class="form-group stylingtext mt-3">
  <label for="" class="pb-2">影片国家</label>
  <select 
    class="form-select" 
    aria-label="默认选择示例" 
    formControlName="movie_country"
    (change)="onCountryChange($event.target.value)"
  >                           
    <option 
      *ngFor="let country of countries" 
      [value]="country.country"
    >
      {{country.country}}
     </option>
  </select>
</div> 

<div class="form-group stylingtext mt-3">
  <label for="" class="pb-2">影片地区</label>
  <input
    class="form-control rounded-5"
    formControlName="movie_region" 
    required
  >
</div>

2. 组件类中新增change事件处理逻辑 #

首先确认组件内已正确初始化响应式表单，补充如下代码即可：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

// 国家数组定义
const countries = [
  {
    "country": "Afghanistan",
    "region": "Asia"
  },
  {
    "country": "Albania",
    "region": "Europe"
  },
  {
    "country": "Algeria",
    "region": "Africa"
  }
];

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  countries = countries;
  movieForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 初始化表单，字段名和模板中formControlName对应
    this.movieForm = this.fb.group({
      movie_country: ['', Validators.required],
      movie_region: ['', Validators.required]
    });
  }

  ngOnInit() {}

  onCountryChange(selectedCountry: string) {
    // 匹配选中国家对应的地区
    const matchedCountry = this.countries.find(item => item.country === selectedCountry);
    if (matchedCountry) {
      // 使用响应式表单API给地区字段赋值
      this.movieForm.get('movie_region')?.setValue(matchedCountry.region);
    }
  }
}

可选替代方案：通过监听表单值变化实现联动 #

如果不想用change事件，也可以直接订阅国家字段的数值变化回调，效果完全一致：

ngOnInit() {
  this.movieForm.get('movie_country')?.valueChanges.subscribe(selectedCountry => {
    const matchedCountry = this.countries.find(item => item.country === selectedCountry);
    if (matchedCountry) {
      this.movieForm.get('movie_region')?.setValue(matchedCountry.region);
    }
  })
}

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