Angular12模态框内表单报formControlName需配合formGroup指令错误

你遇到的报错是因为 updateForm 初始化时机晚于模板渲染时机：你将 updateForm 的实例化逻辑放在了异步接口请求的回调中，而页面/模态框加载时模板就会开始解析，此时 updateForm 还处于未赋值的状态，导致 [formGroup]="updateForm" 绑定失效，子元素的 formControlName 无法找到对应的父级FormGroup实例。

方案1：提前初始化表单，异步返回后更新值 #

不要将FormGroup的实例化放在异步回调中，组件初始化时就创建空表单，接口返回数据后直接更新表单值即可：

profile.component.ts 修改示例 #

// 类声明阶段直接初始化空表单，不要用!声明后不赋值
updateForm: FormGroup = new FormGroup({
  name: new FormControl(''),
  user_info: new FormControl('')
});

ngOnInit(): void {
  this.username = this.router.snapshot.params['username']
  this.router.params.subscribe(params => {
    this.username = params['username'];
    this.getOne();
  });
}

getOne(){
  this.dataService.getProfile(this.username).pipe(
    map(resp => [resp])
  ).subscribe(res=>{
    this.playerData = res;
    this.userProfiles = this.playerData[0];
    // 用patchValue更新表单值，不需要重新创建FormGroup
    this.updateForm.patchValue({
      name: this.userProfiles?.name ?? '',
      user_info: this.userProfiles?.user_info ?? ''
    })
  })
}

方案2：给表单添加渲染条件，等表单初始化完成后再加载 #

如果确实需要在异步回调中创建FormGroup，可以在模板的form标签上加*ngIf判断，等updateForm实例存在后再渲染表单：

profile.html 修改示例 #

<form 
  *ngIf="updateForm"
  class="comment-form"  
  [formGroup]="updateForm" 
  id="editProfileForm" 
>
  <div class="row"> 
    <input formControlName="name" type="text" class="form-control">
  </div>
  <textarea formControlName="user_info" rows="8" class="form-control"></textarea>
  <button type="submit" class="submit btn btn-info" (click)="updateProfile()" >Save</button>
</form>

代码中使用updateForm!: FormGroup 只是TypeScript层面的非空断言，仅用于编译阶段规避类型报错，并不会改变运行时updateForm初始值为undefined的事实，模板绑定不会识别TS的类型断言，所以依然会触发运行时错误。

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