Angular响应式表单控件与组件FormControl绑定失败问题求助

大家好，我最近在做Angular项目时碰到了个头疼的问题——响应式表单里的下拉框和日期输入框的值，完全没办法绑定到组件对应的FormControl上，想请各位大佬帮忙看看！

比如下面这个日期输入框，我本来指望它能把选中的日期同步到deliveryDate字段里，但实际测试下来，这个字段根本没被赋值：

<div formGroupName="applianceDelivery">
    <div class="col" style="font-size: 14px;">
       <h6>Select Delivery Date</h6>
       <input id="deliveryDate" class="form-control fw-bold mb-2" type="date" 
          required formControlName="deliveryDate"
          (change)="saveToDataStore()">
    </div>
</div>

组件里初始化表单的代码是这样的（部分代码截断了）：

private initCheckoutForm = () => {
this.checkoutForm = new FormGroup({
  deliveryAddress: new FormGroup({ 
    firstName: new FormControl(''),
    lastName: new FormControl(''),
    phone: new FormControl(''),
    address1: new FormControl(''),
    address2: new FormControl(''),
    useAsBillingAddress: new FormControl(...)
  }),
  // 我突然想到，是不是我没在checkoutForm里定义applianceDelivery这个FormGroup？因为模板里用了formGroupName="applianceDelivery"，但组件代码里好像没这部分？
});
}

除了这个可能的问题，还有其他原因会导致控件和FormControl绑定失败吗？麻烦大家帮我排查下！

备注：内容来源于stack exchange，提问作者koque