Form group error

Ionic Native
1

I have getting the error .

vendor.js:51847 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’. ("

My code is here.

login.html

<ion-content scroll-events=true>
  <div class="login-content">
    <div class="main-title">
      <img src="/assets/imgs/auth/login/logo.png" />
    </div>
    <form [formGroup]="LoginForm">
      <ion-list>
        <h2>Login</h2>
        <ion-item lines="none">
          <ion-input class="login-input" placeholder="Mobile Number" autofocus=true  formControlName="moblieNo"></ion-input>
        </ion-item>
        <p class="error-text" *ngIf="loginSubmited && LoginForm.controls.moblieNo.errors?.required">Moblie Number is required!.</p>
        <p class="error-text" *ngIf="loginSubmited && LoginForm.controls.moblieNo.errors?.pattern">Moblie Number must be 10 digit.</p>
        <ion-item lines="none">
          <ion-input type="password" class="login-input" placeholder="Password" autofocus=true  formControlName="pass"></ion-input>
        </ion-item>
        <p class="error-text" *ngIf="loginSubmited && LoginForm.controls.pass.errors?.required">Password is required!.</p>
        <p class="forget-pass-text" (click)="gotoForgotpage()">Forgot password!</p>
        <ion-button class="login-btn" shape="round" expand="block" color="light" (click)="doLogin()"><button>Login</button></ion-button>
      </ion-list>
      <div class="login-last-section">
        <p>Don't have any account?</p>
        <ion-button class="signin-btn" shape="round" expand="block" fill="outline" routerLink="/register" ><p>SIGN UP</p></ion-button>
      </div>
    </form>
  </div>
</ion-content>

login.ts

import { FormGroup, FormControl, FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';

ngOnInit() {
    this.LoginForm = this.formBuilder.group({
      moblieNo: ['', [Validators.required, Validators.pattern('^([0-9]{7})$|(^[0-9]{10})$')]],
      pass: ['', [Validators.required, Validators.minLength(6)]]
    });

  }

app.module.ts

import { FormsModule, ReactiveFormsModule } from '@angular/forms';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

What are the issues of my code?
I have always got the error.

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

2

To the *.module.ts for the PAGE, add ReactiveFormsModule to the imports.

3

I have already added ReactiveFormsModule.

4

add ReactiveFormsModule in both app.module.ts and your page.module.ts

5

i have already added ReactiveFormsModule in both app.module.ts and your page.module.ts

6

loginForm: FormGroup; declare loginform in page.ts file

export class LoginPage implements OnInit {
loginForm: FormGroup;
constructor(
private formBuilder: FormBuilder,
private router: Router) {
this.loginForm = this.formBuilder.group({
username: [’’,[ Validators.required , Validators.email]],
password: [’’,[ Validators.required]]
});

          }