Help - Creating formControlName inside component

Ionic Framework ionic-v3
1

hello, people! I need help, I am creating the component with the input to formcontrolname, but it is not working

See the files:

.HTML

<ion-item  padding-bottom padding-right >
    <ion-label color="primary" stacked>{{caption}}</ion-label>
    <ion-input formControlName={{id}}></ion-input> 
</ion-item>

.TS

import { Component, Input, Type } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'textbox',
  templateUrl: 'textbox.html'
})
export class TextboxComponent {

  @Input() caption: string;
  @Input() id: string;

  constructor() {
    console.log('Hello TextboxComponent Component');
  }

}

main page.

.HTML


  <form [formGroup]="formClient">

    <textbox [id]="'nome'"></textbox>

    <button ion-button block (click)="Save()">Save</button>
  </form>
</ion-content>

.Ts


@Injectable()
export class HomePage {
  
  formClient: FormGroup;

  constructor(
      public navCtrl: NavController,
      public formBuilder: FormBuilder,
      public afDatabase: AngularFireDatabase
    ) {

    this.formClient = formBuilder.group({
      nome: ['', Validators.required],
      endereco: ['']
    });
  }

  Save(): void {
    console.log(this.formClient.value);
  }
    
}

Error:

Error: Uncaught (in promise): Error: formControlName must be used with a parent formGroup directive. You’ll want to add a formGroup
directive and pass it an existing FormGroup instance (you can create one in your class).

2

This will never work, and personally I’m glad for that. I guess you might be able to try to bind in a FormControl, but I wouldn’t. Instead, I would try to make the component work like other controls, by exposing ngModel and ngModelChange in the component and throwing ngDefaultControl on it when used, as described in this SO answer.