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">
And the other:
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.
1
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