Reuse FormGroup in multiple pages Ionic Angular

Ionic Framework Ionic Angular
1

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:

input-form.component.html:

<ion-item>
 <form [formGroup]="form">
 <ion-label>{{labelText}}</ion-label>
 <ion-input [formControl]= "control" [id]= "fieldId" class="form-control"></ion-input>
</form>

input-form.component.ts

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


@Component({
    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:

Home.page.html


<ion-header>
 <ion-toolbar>
  <ion-title>welcomeBack</ion-title>
 </ion-toolbar>
</ion-header>
<ion-content>
 <form [formGroup]= "customForm">
 <app-input-form [fieldId]="'userName'" [control]="customForm.get('userName')" ></app-input-form>
</form>
</ion-content>

Home.page.ts


import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
 selector: 'app-welcome-back',
 templateUrl: './welcome-back.page.html',
 styleUrls: ['./welcome-back.page.scss'],
   })
   
export class WelcomeBackPage implements OnInit {
     public customForm: FormGroup;
  
  constructor(private formBuilder: FormBuilder,) {
    this.customForm = this.formBuilder.group({
      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

@NgModule({
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?
2

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.