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

#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