Angular动态地址表单控件异常：无FormControl实例绑定到countryName

1. 每次新建FormGroup导致控件丢失：你的getFormControlsFields方法每次都会创建新的FormGroup替换原有的contactForm。比如初始化时创建了包含countryName的FormGroup，选择国家后又生成只含stateName的新FormGroup，此时formFields数组里同时存在两个字段，但新FormGroup没有countryName对应的控件，HTML渲染时就会抛出找不到FormControl的错误。
2. 表单值无法获取：由于每次替换FormGroup，之前的控件值都会丢失，自然无法通过contactForm.value拿到完整的表单数据。

1. 初始化空FormGroup #

在组件类中先初始化contactForm为空白FormGroup，避免后续重复创建：

contactForm = new FormGroup({});
formFields: string[] = [];

2. 修改getFormControlsFields方法 #

改为向现有FormGroup添加控件，而非重建：

getFormControlsFields(field: string) {
  // 仅当控件不存在时添加
  if (!this.contactForm.contains(field)) {
    this.contactForm.addControl(field, new FormControl(''));
    this.formFields.push(field);
  }
}

3. 完善removeFormControls方法 #

确保移除控件时同步更新FormGroup和formFields数组：

removeFormControls(fields: string[]) {
  fields.forEach(field => {
    if (this.contactForm.contains(field)) {
      this.contactForm.removeControl(field);
      // 从formFields数组中删除对应字段
      const index = this.formFields.indexOf(field);
      if (index !== -1) {
        this.formFields.splice(index, 1);
      }
    }
  });
}

4. 调整handleChange逻辑 #

避免替换FormGroup，同时正确更新字段选项：

handleChange(value: any, type: string) {
  if (type === 'countryName') {
    // 添加state控件（假设字段名为stateName）
    this.getFormControlsFields('stateName');
    // 移除district和place控件
    this.removeFormControls(['districtName', 'placeName']);
    // 更新state的选项列表
    this.fieldValues = {
      ...this.fieldValues,
      stateName: this.getFilteredList(secondLevelArr, value)
    };
  }
  // 可继续添加state、district变化的后续逻辑
}

5. 初始化逻辑调整 #

ngOnInit中直接添加初始控件：

ngOnInit(): void {
  this.getFormControlsFields(Object.keys(this.countryKey)[0]);
}

修改后的HTML（保持原结构即可） #

<form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
  <div *ngFor="let field of formFields">
    <mat-form-field *ngIf="field" appearance="fill" class="w-100-per">
      <mat-label>{{field | titlecase}}</mat-label>
      <mat-select [formControlName]="field" (selectionChange)="handleChange($event.value, field)">
        <mat-option *ngFor="let value of fieldValues[field]" [value]="value.id">{{value.name}}</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  <button type="submit" mat-raised-button color="primary">Submit</button>
</form>

• 始终基于同一个FormGroup实例进行控件的添加/移除，确保FormGroup控件集合和formFields数组完全同步。
• 使用contactForm.contains(field)检查控件是否已存在，避免重复添加。
• 移除控件时同时从formFields数组中删除对应字段，防止HTML渲染不存在的控件。

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