Form on input edit throws Error: There is no FormControl instance attached to form control element

Ionic Framework
1

Hello,
I am trying to validate Ion-inputs and when I edit the field value i get an Error thrown. My test object I am operating on is non- recursive so it is not a factor for this issues, but I cannot simplify the method of construction since i need to be able to pass the FormGroup into the recursive child and add elements to it. ( I have tested it with an expanded nested object and encounter the same error, so for this question I have simplified the scenario).
When I click on the input and change the value a console log error shows:
Error: There is no FormControl instance attached to form control element with name: 'firstname'
I console log my FormGroup object formGrp after I create it and get the below log (so it contains the FormControl as far as i can tell):

image
image1524×1054 124 KB

Here is the component code.
html

     <form [formGroup]="formGrp">
        <ion-item>
            <ion-label position="stacked">{{formObj.Name}}:</ion-label>
            <ion-input 
              [formControlName]="inputName"
              ></ion-input>
        </ion-item>
      </form>
        <ion-list *ngIf="formObj.Children" class="indented">
          <div *ngFor="let child of formObj.Children">
            <my-component
            [formObj]="child"
            [formGrp]="formGrp">
          </my-component>
        </div>
      </ion-list>

ts

import ...

@Component({
  selector: 'my-component'
 ...
})
export class MyComponent {

  @Input() formObj: any ;
  @Input() formGrp: FormGroup;
  inputName;

  constructor() {}

  ngAfterContentInit() {
    this.createControl(this.formObj);
  }

   createControl(obj) {
     const vcom = [];
     ... // some not relevant conditional logic, but required IS added
     vcom.push(Validators.required);
     ...
     const con = new FormControl(this.getValue(obj.Datasource), Validators.compose(vcom));
     this.formGrp.addControl(obj.Name, con);
     console.log('formGroup: ', this.formGrp);
  }
}

I am unable to make any headway on this so any help would greatly be appreciated.
Thanks

2

MyComponent is very tightly coupled to its host. While you wait for better answers, I would suggest reading this article for a different way of structuring this idiom that may design your problem away.

3

I rebuilt the component using the CVA approach, and after a little bit of extra tinkering I got it to no longer throw errors, so thank you for that reference, I am still curious as to why i was having the problem to begin with though.