When trying to extract data from a form using formcontrol, everything seems to be working fine except for the [formcontrol] = "userForm" in the HTML. If I remove this part, the project runs smoothly. I have tried multiple tutorials but none of them seem to work. I was advised that the issue might be with the standalone login-form, so I attempted to delete that line and find a workaround which only resulted in more errors. I also attempted to change the node version to 18 and Angular to 17. As a newcomer to Angular, I have a project deadline approaching soon, so any help would be greatly appreciated. I have imported reactiveForm into the app module as well.
import { Validators,FormGroup, FormControl} from '@angular/forms';
@Component({
selector: 'login-form',
standalone:true,
templateUrl: './login-form.component.html',
styleUrls: ['./login-form.component.css']
})
export class LoginFormComponent {
userForm = new FormGroup ({
'email': new FormControl(''),
'password': new FormControl(''),
})
constructor() {}
onSubmit(): void {
}
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms'; // Correct import
import { LoginFormComponent } from './loginForm/login-form.component';
@NgModule({
declarations: [],
imports: [
CommonModule,
ReactiveFormsModule,
LoginFormComponent
],
})
export class AppModule { }
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { DestinationComponent } from './destination/destination.component';
import { LoginFormComponent } from './loginForm/login-form.component';
import { ReactiveFormsModule } from '@angular/forms'; // Correct import
@Component({
selector: 'app-root',
standalone: true,
imports: [
CommonModule,
LoginFormComponent,
ReactiveFormsModule
],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'app';
}