Sample Ionic 4 and ReactiveForm Validation

I have tryed to found a working sampling of Ionic 4 with reactive form validation (or form validation any way), but all sample I find are for ionic 3 and they all seems not working.
I’m wokring with the actual last version of ionic project template created from cli
I’m certainly missing something but has somebody a working sample or tutorial link please ?

Most of the time, the error is on [formGroup] property in form tag and formControlName on ion-input that are not known

I’ve tried many like:

1 Like

Hi Jandry -

Can you provide more details of the error or sample code of your in Stackblitz to that we can take a look!

Quick sample on Reactive Forms in pure Angular -

The above code should work in Ionic as well.


1 Like

I already saw this link but it wasn’t working, I had same issue as above if I remember well (I’ll retry)

My issues are:


 <form [formGroup]="loginForm">

I’ve error "Can 't bind to ‘formGroup’ since it itsn’t a known property of ‘form’
And also “No provider for ControlContainer”
And on

<ion-input formControlName="username" type="text">

I’ve “No provider for NgControl”

I’m using:
ionic (Ionic CLI) : 4.5.0 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.0-rc.0
@angular-devkit/build-angular : 0.11.4
@angular-devkit/schematics : 7.1.4
@angular/cli : 7.1.4
@ionic/angular-toolkit : 1.2.2

in app.module.ts I’ve

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

  declarations: [AppComponent],
  entryComponents: [],
  exports: [
  imports: [BrowserModule, FormsModule, ReactiveFormsModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  bootstrap: [AppComponent]
export class AppModule {}

In I’ve

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

  selector: 'app-home',
  templateUrl: '',
  styleUrls: [''],
export class HomePage {
  public loginForm: FormGroup;

  constructor(public router: Router, public formBuilder: FormBuilder) {

    this.loginForm ={
        username: ['', Validators.required],
        password: ['', Validators.required]


onSignIn() {
    console.log('what is goin on');

And in

<ion-content padding>
  <form [formGroup]="loginForm">

            <ion-label position="stacked">Username</ion-label>
            <ion-input formControlName="username" type="text">

            <ion-label position="stacked">Password</ion-label>
            <ion-input formControlName="password" type="text">


    <ion-row class="signin">
            <ion-button (click)="onSignIn()" color="primary" shape="full" expand="block">Sign In</ion-button>


And for info, I did the same code using ionic 3 project, and it’s working

I’m going to guess that you’re lazily loading HomePage and its module does not import the FormsModule and ReactiveFormsModule.


Yes !!! that’s it, thanks a lot !
I’m a bit lost with those modules, I though the app.module.ts was global to the app

By no means are you alone. I personally have decided so far to ignore Ionic’s lazy loading and just throw everything in the app module, which makes all these problems vanish.

1 Like