Angular 2下拉联动表单问题：选中值不显示求助

你遇到的下拉框选中值消失的问题，主要有两个核心原因：

1. 混合使用[(ngModel)]和响应式表单的formControlName
   Angular的响应式表单本身已经通过FormGroup/FormControl管理表单状态，强行混合ngModel会导致双向绑定的同步逻辑冲突，尤其是在你重新构建表单的时候，这种冲突会直接导致选中状态丢失。

2. 每次切换类型时完全重建FormGroup
   你的createType1Form、createType2Form等方法都是直接重新创建整个myForm对象，新的表单控件会被初始化为空值（['', Validators.required]），这会直接覆盖掉之前选中的下拉框值，而且新的表单控件和原来的下拉框绑定关系被打断，自然无法显示选中值。

另外还有两个小问题：

• situationsArray的类型定义错误，它应该是存储对象的数组（比如any[]或自定义的Situation接口数组），而不是string[]；
• 代码里存在函数名不匹配的问题（比如onChangeSituation里调用createJobForm，但你定义的是createType1Form），这会导致切换类型时无法正确创建对应表单。

我们可以通过纯响应式表单的方式来修复这个问题，避免混合使用ngModel，同时动态调整表单控件而不是重建整个表单：

1. 调整组件代码 #

// 先定义一个Situation接口（可选，推荐类型安全）
interface Situation {
  id: number;
  name: string;
  type: number;
}

@Component({
  // 组件元数据...
})
export class YourComponent {
  situationsArray: Situation[]; // 修正类型
  myForm: FormGroup;

  constructor(private _fb: FormBuilder) { }

  // 初始化基础表单，包含选中的situation控件
  createBaseForm() {
    this.myForm = this._fb.group({
      selectedSituation: [null, Validators.required], // 存储选中的situation对象
      // 这里放所有类型通用的表单字段
      commonField: ['', Validators.required]
    });
  }

  ngOnInit() {
    this.createBaseForm();
    this.getListSituations(); // 调用服务获取列表
  }

  onChangeSituation(): void {
    const selectedSituation = this.myForm.get('selectedSituation').value;
    if (!selectedSituation) return;

    // 先清除之前添加的类型专属控件，避免残留
    this.clearTypeSpecificControls();

    // 根据类型动态添加对应控件
    switch(selectedSituation.type) {
      case 1:
        this.myForm.addControl('type1SpecificField', this._fb.control('', Validators.required));
        this.myForm.addControl('type1AnotherField', this._fb.control(''));
        break;
      case 2:
        this.myForm.addControl('type2SpecificField', this._fb.control('', Validators.required));
        break;
      case 3:
        this.myForm.addControl('type3SpecificField', this._fb.control(''));
        break;
      default:
        // 默认情况不需要添加额外控件
        break;
    }
  }

  // 辅助方法：清除类型专属控件
  private clearTypeSpecificControls(): void {
    const typeControls = ['type1SpecificField', 'type1AnotherField', 'type2SpecificField', 'type3SpecificField'];
    typeControls.forEach(controlName => {
      if (this.myForm.contains(controlName)) {
        this.myForm.removeControl(controlName);
      }
    });
  }

  saveForm() {
    if (this.myForm.valid) {
      console.log(this.myForm.value);
      // 提交逻辑...
    }
  }

  // 服务获取列表的方法
  getListSituations() {
    // 假设你的服务返回数据后赋值：
    // this.yourService.getSituations().subscribe(data => this.situationsArray = data);
  }
}

2. 调整模板代码 #

<form [formGroup]="myForm" (ngSubmit)="saveForm()" novalidate>
  <!-- 下拉框直接绑定到表单的selectedSituation控件 -->
  <select class="form-control" formControlName="selectedSituation" (change)="onChangeSituation()">
    <option [ngValue]="null" disabled>请选择情境</option>
    <option [ngValue]="situation" *ngFor="let situation of situationsArray">
      {{situation.name}}
    </option>
  </select>

  <!-- 通用字段 -->
  <input type="text" formControlName="commonField" placeholder="通用字段">

  <!-- 根据选中的类型显示对应字段 -->
  <div *ngIf="myForm.get('selectedSituation')?.value?.type === 1">
    <input type="text" formControlName="type1SpecificField" placeholder="类型1专属字段">
    <input type="text" formControlName="type1AnotherField" placeholder="类型1另一个字段">
  </div>

  <div *ngIf="myForm.get('selectedSituation')?.value?.type === 2">
    <input type="text" formControlName="type2SpecificField" placeholder="类型2专属字段">
  </div>

  <button type="submit" [disabled]="!myForm.valid">提交</button>
</form>

• 优先使用纯响应式表单：响应式表单更适合复杂的动态表单场景，避免混合ngModel，减少状态同步问题；
• 动态调整表单控件而非重建：通过addControl/removeControl来添加或移除类型专属控件，保留已有表单状态；
• 类型安全：自定义Situation接口来约束数组类型，避免类型不匹配的隐性错误；
• 表单状态检查：在提交前通过myForm.valid检查表单有效性，确保数据合法。

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