Angular子组件更新表单值报addControl相关null错误如何解决

• 根因1：子组件模板未绑定传入的FormGroup实例
  你在子组件模板中使用了formControlName指令，但所有表单控件没有被包裹在绑定了传入form实例的formGroup指令容器中，Angular无法找到对应的表单组上下文，导致报错。
  修正后的子组件模板代码：

  <!-- 新增外层容器绑定FormGroup，这步是缺失的核心逻辑 -->
  <div [formGroup]="form">
    <div class="col-sm-2">
      <label for="priority"> Priority</label>
    </div>
    <div class="input-group col-sm-10">
      <input type="text" class="form-control" id="priority" name="priority" formControlName="priority"
             placeholder="priority">
    </div>
  </div>
  

• 根因2：父组件调用子组件时语法错误
  你原代码中<app-child[form]="form"></app-child>的标签和输入属性之间缺少空格，会导致输入属性识别失败，form没有正确传入子组件就会为null，触发空指针报错。修正后代码：

  <div *ngIf="editType === 'priority' && form">
    <!-- 标签名和输入属性之间加空格，同时新增form非空判断规避时序问题 -->
    <app-child [form]="form"></app-child>
  </div>
  

• 根因3：多余的addControl逻辑冲突
  你父组件的FormGroup中已经提前定义了priority控件，子组件中不需要重复调用addControl添加同名字段，直接删掉这行代码即可，重复添加会导致表单控件冲突。

完成以上修改后，父子组件共用同一个FormGroup实例，子组件对表单值的修改会自动同步到父组件，无需额外的事件通信即可实现子组件更新表单数据的需求。

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