Getting ERROR while using the form in IONIC+ANGULAR

Ionic Framework Ionic Angular
1

Form is not loading due to below error.
Error:
ERROR Error: Uncaught (in promise): Error: NodeInjector: NOT_FOUND [ControlContainer]
Error: NodeInjector: NOT_FOUND [ControlContainer]
at getOrCreateInjectable (core.js:5862)
at Module.ɵɵdirectiveInject (core.js:21116)
at NodeInjectorFactory.NgControlStatusGroup_Factory [as factory] (forms.js:1073)
at getNodeInjectable (core.js:5993)
at instantiateAllDirectives (core.js:12997)
at createDirectivesInstances (core.js:12209)
at ɵɵelementStart (core.js:21302)
at LeadQualificationPage_Template (template.html:2)
at executeTemplate (core.js:12169)
at renderView (core.js:11939)
at resolvePromise (zone-evergreen.js:798)
at resolvePromise (zone-evergreen.js:750)
at zone-evergreen.js:860
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Object.onInvokeTask (core.js:41645)
at ZoneDelegate.invokeTask (zone-evergreen.js:398)
at Zone.runTask (zone-evergreen.js:167)
at drainMicroTaskQueue (zone-evergreen.js:569)
at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:

html page code:

<ion-list>    

    <ion-item class="ion-card" lines="none">

        <ion-label position="floating">First Name</ion-label>

        <ion-input type="text" class="form-control" formControlName="firstName"></ion-input>

    </ion-item>

component.ts:
export class LeadQualificationPage implements OnInit {

leadQualForm: FormGroup;

constructor(public formBuilder: FormBuilder) { }

ngOnInit() {

console.log('oninit started....................');

this.leadQualForm = this.formBuilder.group({

  firstName:  ['', Validators.required],

  lastName: ['', Validators.required],

  age: ['', Validators.required],

});

}

}

appmodule.ts:

import { FormsModule } from ‘@angular/forms’;

import { ReactiveFormsModule} from ‘@angular/forms’;

import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;

@NgModule({

declarations: [AppComponent],

entryComponents: ,

imports: [

BrowserModule,

 IonicModule.forRoot(),

  AppRoutingModule,

  NgProgressModule,

  HttpClientModule,

  ReactiveFormsModule,

  FormsModule,

  BrowserAnimationsModule

],

providers: [

StatusBar,

SplashScreen,

{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },

Camera

],

bootstrap: [AppComponent]

})

export class AppModule {}

Please suggest to fix this issue.

2

First of all, how to codefence.

Secondly, formControlName requires that there be an enclosing element somewhere with a formGroup binding (typically this is a <form> element). You didn’t post one, but maybe it’s outside the snippet you posted. If not, then add one.