login.components.ts:
import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
import {AuthService} from "../../service/auth.service";
import {TokenStorageService} from "../../service/token-storage.service";
import {Router, RouterLink} from "@angular/router";
import {NotificationService} from "../../service/notification.service";
import {error} from "@angular/compiler-cli/src/transformers/util";
import {MatFormField, MatLabel} from "@angular/material/form-field";
import {MatInput} from "@angular/material/input";
import {MatButton} from "@angular/material/button";
@Component({
selector: 'app-login',
standalone: true,
imports: [
ReactiveFormsModule,
MatFormField,
MatLabel,
MatInput,
MatButton,
RouterLink
],
templateUrl: './login.component.html',
styleUrl: './login.component.css'
})
export class LoginComponent implements OnInit{
constructor(
public loginForm: FormGroup,
private authService: AuthService,
private tokenStorage: TokenStorageService,
private notificationService: NotificationService,
private router: Router,
private fb: FormBuilder
)
{
if(this.tokenStorage.getUser()) {
this.router.navigate(['main'])
}
}
ngOnInit(): void {
this.loginForm = this.createLoginForm();
}
createLoginForm(): FormGroup{
return this.fb.group({
username: ['', Validators.compose([Validators.required])],
password: ['', Validators.compose([Validators.required])]
}
)
}
submit(): void {
this.authService.login({
username: this.loginForm.value.username,
password: this.loginForm.value.password
}).subscribe(data => {
console.log(data);
this.tokenStorage.saveToken(data.token);
this.tokenStorage.saveUser(data.user);
this.notificationService.showSnackBar("Successfully logged in")
this.router.navigate(['/']);
window.location.reload();
}, error => {
console.log(error);
this.notificationService.showSnackBar(error.message);
})
}
}
app.component.ts:
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {MaterialModule} from "./material-module";
import {HttpClientModule} from "@angular/common/http";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {authInterceptorProviders} from "./helper/auth-interceptor.service";
import {authErrorInterceptorProvider} from "./helper/error-interceptor.service";
@Component({
selector: 'app-root',
standalone: true,
imports: [MaterialModule, HttpClientModule, FormsModule, ReactiveFormsModule, RouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.css',
providers: [
authInterceptorProviders, authErrorInterceptorProvider
]
})
export class AppComponent {
title = 'instazooFrontend';
}
app.routers.ts:
import { Routes } from '@angular/router';
import {LoginComponent} from "./auth/login/login.component";
import {RegisterComponent} from "./auth/register/register.component";
export const routes: Routes = [
{path: 'login', component: LoginComponent},
{path: 'register', component: RegisterComponent},
];
<div class="login-page">
<form [formGroup]="loginForm">
<div class="justify-content-center">
<mat-form-field appearance="outline">
<mat-label>Email Address</mat-label>
<input formControlName="username">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Password</mat-label>
<input matInput formControlPassword="Password">
</mat-form-field>
</div>
<div id="controls" class="row">
<button style="width: 20%" [disabled] = "loginForm.invalid" (click)="submit()" mat-flat-button color="primary">
Login
</button>
<a routerLink="/register">Register</a>
</div>
</form>
</div>
............................................................................................................................................................................................................
When I navigate to 'http://localhost:4200/login' expected to see the form, but I'm immediately redirected to "http://localhost:4200"
Don't use public loginForm :FormGroup
in the constructor, declare it above export class like
loginForm!:FormGroup
Check out this verified answer too.
Hope this helps!!!