Reuse FormGroup in multiple pages Ionic Angular

Im new to Ionic, and I would like to learn how to create reusable components in my project.

So far, I created a component for a reusable input Form as follows:


 <form [formGroup]="form">
 <ion-input [formControl]= "control" [id]= "fieldId" class="form-control"></ion-input>


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

    selector: 'app-input-form',
    templateUrl: './input-form.component.html',
    styleUrls: ['./input-form.component.scss'],
   export class InputFormComponent implements OnInit {
   @Input() public form: FormGroup;
   @Input() public control: any;
   @Input() public fieldId: any;
   constructor() {

   ngOnInit() {}

I am using this template like this:

 <form [formGroup]= "customForm">
 <app-input-form [fieldId]="'userName'" [control]="customForm.get('userName')" ></app-input-form>

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
 selector: 'app-welcome-back',
 templateUrl: './',
 styleUrls: ['./'],
export class WelcomeBackPage implements OnInit {
     public customForm: FormGroup;
  constructor(private formBuilder: FormBuilder,) {
    this.customForm ={
      userName : 'test'
  ngOnInit() {

I also imported the modules in app.module.ts

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
and added them in the NgModule imports

declarations: [AppComponent],
entryComponents: ,
imports: [BrowserModule, BrowserAnimationsModule, IonicModule.forRoot(), AppRoutingModule, ReactiveFormsModule, FormsModule],

but I still get this error when running the app:

core.js:6241 ERROR Error: Uncaught (in promise): Error: NodeInjector: NOT_FOUND [ControlContainer]
Error: NodeInjector: NOT_FOUND [ControlContainer]

Any ideas how to fix this?

I suspect that your proximate question is likely a result of not importing the FormsModule into the lazily-loaded module for your component, but I would not go down this road any further if I were you.

The point of FormGroup is to coordinate value and validation for several controls. It doesn’t make sense to have a bunch of separate FormGroups (or <form> elements), each containing a single control.

I would instead look at the idiom of defining your own ControlValueAccessor, as documented in articles such as this one.