Please help Im a beginner. im stuck with a simple form ionic 4

Ionic Framework
1

core.js:15713 ERROR Error: Uncaught (in promise): Error: Template parses errors:
Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’

my page.html

                      <ion-input type="text" name="reason"></ion-input>
              </ion-item>
                  <ion-button expand="block" shape="round" (click)="apply()">Apply</ion-button>
                    
      </form>

app.module.ts

import { NgModule, enableProdMode } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { RouteReuseStrategy } from ‘@angular/router’;

import { IonicModule, IonicRouteStrategy } from ‘@ionic/angular’;
import { SplashScreen } from ‘@ionic-native/splash-screen/ngx’;
import { StatusBar } from ‘@ionic-native/status-bar/ngx’;

import { AppRoutingModule } from ‘./app-routing.module’;
import { AppComponent } from ‘./app.component’;
import { BarcodeScanner } from ‘@ionic-native/barcode-scanner/ngx’;
import { Device } from ‘@ionic-native/device/ngx’;
import { HttpModule } from ‘@angular/http’;
import { HttpClientModule } from ‘@angular/common/http’;
import { Toast } from ‘@ionic-native/toast/ngx’;
import { FormGroup, FormControl, Validators, FormBuilder, ReactiveFormsModule, FormsModule } from ‘@angular/forms’;

enableProdMode();

@NgModule({
declarations: [AppComponent],
entryComponents: ,
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpModule, HttpClientModule, ReactiveFormsModule],
providers: [
StatusBar,
SplashScreen,
BarcodeScanner,
Device,
Toast,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}

tab3.page.ts

import { Component, enableProdMode } from ‘@angular/core’;
import { FormGroup, FormControl, Validators, FormBuilder, ReactiveFormsModule } from ‘@angular/forms’;

@Component({
selector: ‘app-tab3’,
templateUrl: ‘tab3.page.html’,
styleUrls: [‘tab3.page.scss’]
})

export class Tab3Page {

    loginForm : FormGroup;
    constructor(public formBuilder: FormBuilder){}
    ngOnInit() {
          
          imports: [
            ReactiveFormsModule
          ]
    }

}

2

Hi @rajathdevapp :wave:

ReactiveFormsModule needs to go in the imports property of the module declaration (tab3.module.ts), not in the page code (tab3.page.ts). What you currently have in the ngOnInit() function isn’t valid TypeScript, so remember to delete that as well.

I hope it helps,
Rodrigo

3

did you fix it?
I’m trying to solve this problem, but no way…
Could you explain what you do to fix it? thanks!