Formgroup does not work on Ionic 4

Question

Good evening guys, I tried to use formgroup on Ionic 4 and it didn’t work, in service I use Ionic 3 and it worked normal, changed something ? Thanks.

Answer 1

I will post my code as it is working. If not, explain better where the error is.

login.pagets.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from "@angular/forms";


@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {

  loginForm: FormGroup

  constructor(

    private formBuilder: FormBuilder,

  ) { }

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      email: [null, Validators.required],
      password: [null, Validators.required],
    });
  }

  onTeste() {
    console.log(this.loginForm.value);
  }
}

login.page.html (FormGroup and FormGroupName)

<ion-content  padding>
  <form [formGroup]="loginForm">
    <ion-grid>
      <ion-row color="primary" justify-content-center>
        <ion-col align-self-center size-md="6" size-lg="5" size-xs="12">
          <div text-center>
            <h3>Login</h3>
          </div>
          <div padding>
            <ion-item>
              <ion-input name="email" type="email" formControlName="email" placeholder="[email protected]" required></ion-input>
            </ion-item>
            <ion-item>
              <ion-input name="password" type="password" formControlName="password" placeholder="Password" required></ion-input>
            </ion-item>
          </div>
          <div padding>
            <ion-button size="large" type="submit"  (click)="onTeste()" expand="block">Login</ion-button>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </form>
</ion-content>

Login.module.ts (Formmodule and Reactiveformsmodule)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; //esses aqui
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { LoginPage } from './login.page';

const routes: Routes = [
  {
    path: '',
    component: LoginPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [LoginPage]
})
export class LoginPageModule {}

And import the import { FormsModule, ReactiveFormsModule } from '@angular/forms'; on app.module.ts

I did a test and printed it on console the data of form.