Angular问题：无法将自动完成FormControl加入FormGroup

尝试把用作自动完成字段的FormControl添加到FormGroup中，但取消initializeFormAndItsFields函数中相关代码注释后，调用onSaveChannelFields时所有表单值都打印为undefined。目前手动获取独立field_name控件的值可以工作，但希望该字段能和其他字段统一通过FormGroup管理。

解决方案 #

1. 修改TS文件 #

调整FormGroup初始化逻辑

移除组件中单独声明的field_name = new FormControl();，在initializeFormAndItsFields函数中正确注册该控件到FormGroup：

export class EditChannelFieldsComponent implements OnInit {
  form: FormGroup; // 仅保留FormGroup声明

  ngOnInit() {
    this.initializeFormAndItsFields();
  }

  initializeFormAndItsFields() {
    this.form = new FormGroup({
      field_name: new FormControl(null, {
        validators: [Validators.required]
      }),
      field_value: new FormControl(null, {
        validators: [Validators.required]
      }),
      description: new FormControl(null, {
        validators: [Validators.required]
      }),
      group_name: new FormControl(null, {
        validators: [Validators.required]
      }),
      group_value: new FormControl(null, {
        validators: [Validators.required]
      }),
    });
  }

修正表单数据获取逻辑

修复onSaveChannelFields中的笔误（group改为group_value），确保所有字段从FormGroup中获取：

onSaveChannelFields() {
  console.log('emitting data')
  const formData = {
    field_name: this.form.value.field_name,
    field_value: this.form.value.field_value,
    description: this.form.value.description,
    group_name: this.form.value.group_name,
    group_value: this.form.value.group_value // 修正笔误
  };
  console.log('formData',formData);
  // this.onSubmitReason.emit(formData);
  // this.form.reset();
}

如果需要在组件中直接引用field_name控件（比如处理自动完成逻辑），可以添加一个getter：

get fieldNameControl() {
  return this.form.get('field_name') as FormControl;
}

2. 修改HTML文件 #

将自动完成输入框的[formControl]="field_name"改为formControlName="field_name"，关联到FormGroup中的对应控件：

<mat-form-field>
  <input type="text" matInput formControlName="field_name" [matAutocomplete]="auto" placeholder="Field name">
  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
    <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
      field_name: {{option.field_name}}
      field_value: {{option.field_value}}
      description: {{option.description}}
      group_name: {{option.group_name}}
      group_value: {{option.group_value}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

注意：如果[value]="option"绑定的是整个对象，那么this.form.value.field_name会是完整的option对象。如果只需要field_name字段，可以将[value]改为option.field_name，或者在formData中写成field_name: this.form.value.field_name?.field_name。

问题原因 #

1. 之前的代码中，HTML输入框绑定的是独立的field_name控件，而FormGroup中又重新创建了一个同名控件，二者完全独立，导致FormGroup中的控件没有接收到输入值，所以this.form.value全部为undefined。
2. onSaveChannelFields中存在笔误，group_value字段错误引用了this.form.value.group，导致该字段值也为undefined。

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