Error: can't bind to 'formGroup' since it isn't a known property of 'form'

I'm creating an app in IONIC V 4

In the form using FormBuilder I added the tag [formGroup] appeared two errors:

  <form [formGroup]="formRegister">

error message VS code

And the other:

insert the description of the image here

O componet [register.page.ts] looks like this:


    import { User } from './../../../models/user';
    import { Component, OnInit, Input } from '@angular/core';
    import { ModalController, NavController } from '@ionic/angular';
    import { LoginPage } from '../login/login.page';
    import { AuthService } from 'src/app/services/auth.service';
    import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
    import { AlertService } from 'src/app/services/alert.service';

    @Component({
      selector: 'app-register',
      templateUrl: './register.page.html',
      styleUrls: ['./register.page.scss'],
    })
    export class RegisterPage implements OnInit {
      formRegister: FormGroup;

      constructor(
        private modalController: ModalController,
        private authService: AuthService,
        private navCtrl: NavController,
        private alertService: AlertService,
        private formBuilder: FormBuilder
      ) {  }

      ngOnInit(): void {
       this.formRegister = this.formBuilder.group({
          username: ['', [Validators.required, Validators.minLength(4)]],
          email: ['', [Validators.required, Validators.email]],
          password: ['', [Validators.required, Validators.pattern('(?=.*[a-z])(?=.*[A-Z]).{6,}')]]
        });
      }

      register() {
        this.authService.register(this.formRegister.value)
        .subscribe(data => {
            this.authService.login(this.formRegister.value)
            .subscribe((res) => { console.log(res); },
              error => {
                console.log(error);
              },
              () => {
                this.dismissRegister();
                this.navCtrl.navigateRoot('/dashboard');
              }
            );
            // tslint:disable-next-line:no-string-literal
            this.alertService.presentToast(data['message']);
          },
          error => {
            console.log(error);
          },
          () => { console.log('ok'); }
        );
      }

      }

O module [register.modulate.ts] looks like this:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { RegisterPage } from './register.page';
import { Routes, RouterModule } from '@angular/router';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

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

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


Or app.modulate.ts looks like this:

import { NgModule } 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 { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { HttpClientModule } from '@angular/common/http';
import { NativeStorage } from '@ionic-native/native-storage/ngx';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

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

What am I doing wrong?

I appreciate it now.

Author: William Sales, 2019-08-23

1 answers

Was entering the amounts: import { ReactiveFormsModule, FormsModule } from '@angular/forms'; only in the module RegisterPageModule however (in my case) there is another module that calls the one that I displayed the form in the modal, when entering the amounts fixed the error.

 1
Author: William Sales, 2019-08-27 14:19:26