Sample Ionic 4 and ReactiveForm Validation

Ionic Framework
1

Hi,
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
2

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 - http://jasonwatmore.com/post/2018/05/10/angular-6-reactive-forms-validation-example

The above code should work in Ionic as well.

Thanks
Roopesh

1 Like
3

Hi,
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:

On

 <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';

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

In home.page.ts I’ve

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  public loginForm: FormGroup;

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

    this.loginForm = formBuilder.group({
        username: ['', Validators.required],
        password: ['', Validators.required]
    });

}

onSignIn() {
    console.log('what is goin on');
    console.log(this.loginForm.value);
    this.router.navigateByUrl('/referring-physician');
}
}

And in home.page.html

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

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


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

    </ion-list>

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

</form></ion-content>

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

4

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

6 Likes
5

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

6

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