An issue is arising while attempting to access a registration page... The error occurs when trying to navigate from the login page to the registration page Error:
RegisterPage.html:57 ERROR TypeError: Cannot read property 'valid' of undefined
Content in my register.component.html
<form [formGroup]="registerForm" (submit)="register()">
<ion-col>
<ion-item class="boder-input">
<ion-label position="floating">
<ion-icon name="contact"></ion-icon> Name
</ion-label>
<ion-input type="text" formControlName="name"></ion-input>
</ion-item>
</ion-col>
...
</form>
Content in my register.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AuthService } from '../services/auth.service';
import { Router } from '@angular/router';
import { resolve } from 'url';
@Component({
selector: 'app-register',
templateUrl: './register.page.html',
styleUrls: ['./register.page.scss'],
})
export class RegisterPage implements OnInit {
...
}
Content in my register.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { RegisterPage } from './register.page';
const routes: Routes = [
{
path: '',
component: RegisterPage
}
];
@NgModule({
imports: [
CommonModule,
IonicModule,
ReactiveFormsModule,
RouterModule.forChild(routes)
],
declarations: [RegisterPage]
})
export class RegisterPageModule {}
I suspect that there may be an issue with reading form controls in the HTML. Any advice on how to resolve this issue would be greatly appreciated.