使用反应式嵌套形式，将输入包装在自定义组件中

Question

我面临将formGroupName更正的引用传递到我的子组件（基本输入）的问题。

我有一个用于标签和输入的单独组件（基本输入）。我想在formgroup中创建一个层次结构，以便可以将数据原样传递给rest服务。 formGroupName用于创建层次结构。代码正常工作，我通过简单的输入（在html文件中注释了输入）获得了正确格式的数据。但是当我用基本输入替换了这些内容时，在控制台中出现了此错误（检查图像） ）。

telex.component.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
    import { FormControl, FormGroup, Validators, FormBuilder, NgModel } from '@angular/forms';


    @Component({
      selector: 'app-telex',
      templateUrl: './telex.component.html',
      styleUrls: ['./telex.component.scss']
    })
    export class TelexComponent implements OnInit {
      public xpandStatus = false;
      registerForm: FormGroup;

      constructor(private formBuilder: FormBuilder) {
       }
      ngOnInit() {
        this.registerForm = this.createFormGroup();

      }
      get f() { return this.registerForm.controls; }
      createFormGroup() {
        return new FormGroup({
          personalData: new FormGroup({
            Name: new FormControl(),
            Code: new FormControl(),
            ID: new FormControl()
          }),
          City: new FormControl(),
        });
      }
      onSubmit(){
        console.log(this.registerForm);
      }

    }

telex.component.html

<expansion-form [panelTitle]="'Remitter Details'">
          <form [formGroup]= "registerForm">
            <div class="row" [formGroupName]="personalData">
                <div class="form-group">  
                    <base-input [group]="registerForm" [inputType]="'text'" [inputName]="'Name'" [inputLabel]="'Name'" ></base-input>
                    <!-- <input formControlName = "Name" /> -->
                    <validation-errors [errorLabel]="'Name'" [errorObj]="f.Name.errors" [showIf]="f.Name.touched && f.Name.errors"></validation-errors>         
                </div>
                <div class="form-group">  
                    <base-input [group]="registerForm" [inputType]="'text'" [inputName]="'Code'" [inputLabel]="'Code'" ></base-input>
                    <!-- <input formControlName = "Code" /> -->
                    <validation-errors [errorLabel]="'Code'" [errorObj]="f.Code.errors" [showIf]="f.Code.touched && f.Code.errors"></validation-errors>         
                </div>
                <div class="form-group">  
                  <base-input [group]="registerForm" [inputType]="'text'" [inputName]="'ID'" [inputLabel]="'ID'" ></base-input>
                  <!-- <input formControlName = "ID" /> -->
                  <validation-errors [errorLabel]="'ID'" [errorObj]="f.ID.errors" [showIf]="f.ID.touched && f.ID.errors"></validation-errors>         
                </div>
            </div> 
          </form>                   
</expansion-form>
<expansion-form [panelTitle]="'Beneficiary Details'">
          <form [formGroup]= "registerForm">
            <div class="form-group">  
                <base-input [group]="registerForm" [inputType]="'text'" [inputName]="'City'" [inputLabel]="'City'" ></base-input>
                <validation-errors [errorLabel]="'City'" [errorObj]="f.City.errors" [showIf]="f.City.touched && f.City.errors"></validation-errors>         
            </div>
          </form> 
</expansion-form>

base-input.component.ts

import { Component, OnInit, ViewEncapsulation, Input, EventEmitter, Output, ViewChild, ElementRef } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'base-input',
  template: `
  <div class="baseInput" [formGroup]= "group" >
    <span>{{ inputLabel }} : </span>
    <input formControlName="{{ inputName }}"  type="{{ inputType }}" />
  </div>
    `,
  styleUrls: ['./base-input.component.scss'],
  encapsulation: ViewEncapsulation.Native
})
export class BaseInputComponent implements OnInit {
  @Input() inputLabel : string;
  @Input() inputType : string;
  @Input() inputName : string;
  @Input() group : FormGroup;



  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    console.log(this.inputName);

    console.log(this.inputType);
  }

}

Console log errors