Angular报错NG01203：表单控件'name'无值访问器求助

错误原因分析 #

控制台报错Error: NG01203: No value accessor for form control name: 'name'，结合你的代码，主要触发点如下：

1. 拼写错误导致表单初始化异常：父组件中FormControle是拼写错误，正确应为FormControl，这个错误会导致表单控件未被正确实例化，进而引发绑定报错。
2. 子组件未导入ReactiveFormsModule：若子组件所在模块未导入ReactiveFormsModule，Angular无法识别formGroup和formControlName指令，会误报无值访问器。
3. 变更检测时机问题：子组件模板初始化时，@Input()的form可能还未从父组件传入，导致短暂绑定失败，后续值传入后功能恢复，但错误已被打印。

分步修复方案 #

1. 修正父组件的拼写错误 #

将父组件中所有FormControle改为FormControl：

ngOnInit() {
    this.form = this.fb.group({
      person: this.fb.group({
        name: new FormControl(''), // 修正拼写错误
        age: new FormControl(''),  // 修正拼写错误
      }),
      city: this.fb.group({ name: new FormControl('') })
    })
  }

  get person(): FormGroup {
    return this.form.get('person') as FormGroup;
  }

  get city(): FormGroup {
    return this.form.get('city') as FormGroup;
  }

2. 确保子组件模块导入ReactiveFormsModule #

在子组件所属的NgModule中导入ReactiveFormsModule：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { ChildComponent } from './child.component';

@NgModule({
  declarations: [ChildComponent],
  imports: [
    CommonModule,
    ReactiveFormsModule // 添加该模块
  ],
  exports: [ChildComponent]
})
export class ChildModule { }

3. 处理变更检测时机（可选） #

如果是初始化时form未传入导致的报错，可在子组件模板中添加*ngIf确保form存在后再渲染表单：

<form *ngIf="form" [formGroup]="form">
  <input type="text" formControlName="name"/>
</form>

验证修复 #

完成上述修改后重启项目，控制台的NG01203错误会消失，表单功能保持正常。

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