Angular中无法为FormControl赋值，HTML显示空白求助

核心问题 #

你直接调用this.initialSettingsForm.get('connectionString')是错误的——因为initialSettingsForm是FormArray，它的子项是FormGroup，不能直接通过控件名获取内部的FormControl，必须先定位到数组中对应的FormGroup，再操作里面的控件。

修复代码（构造函数内赋值） #

把你构造函数里的赋值代码改成以下任意一种方式：

方式1：通过数组索引获取FormGroup后赋值

constructor(...) { 
  this.initialSettingsForm = new FormArray([this.createInitialSettingsFormGroup()]);      
  // 获取数组第一个FormGroup
  const firstFormGroup = this.initialSettingsForm.controls[0] as FormGroup;
  firstFormGroup.get('connectionString')?.setValue('testConnectionString');
}

方式2：使用FormArray的at()方法定位控件

constructor(...) { 
  this.initialSettingsForm = new FormArray([this.createInitialSettingsFormGroup()]);      
  this.initialSettingsForm.at(0).get('connectionString')?.setValue('testConnectionString');
}

后续从Service获取数据的赋值方式 #

如果是之后通过appSettingsService异步获取数据再赋值，推荐在ngOnInit生命周期钩子中处理（避免构造函数内处理异步逻辑）：

ngOnInit(): void {
  this.appSettingsService.getSettings().subscribe(settings => {
    // 用patchValue可以只更新指定控件，比setValue更灵活
    (this.initialSettingsForm.at(0) as FormGroup).patchValue({
      connectionString: settings.connectionString
    });
  });
}

为什么创建时设默认值有效？ #

因为你在createInitialSettingsFormGroup里创建FormControl('', Validators.required)时，是直接给当前FormGroup内的控件设置初始值，控件的归属关系正确，所以能正常绑定到输入框；而后续赋值时路径错误，根本没找到对应的connectionString控件，自然不会更新输入框内容。

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