Not going to specific URL this.router.navigate() in AngularJs - html

Question

I am making a registration form in angularJS and I use the bootstrap template for design.
This is my form and path to the form page is http://localhost:4200/signup
<form method="post" (submit)='register(username.value,email.value,password.value)'>
<div class="form-group">
<label for="name">Full name</label>
<input type="text" id="name" #username class="form-control" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="remail">Email address</label>
<input type="email" id="remail" #email class="form-control" placeholder="Enter email">
</div>
<div class="form-group">
<label for="rpassword">Password</label>
<input type="password" #password class="form-control" id="rpassword" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Register</button>
</form>
But the problem is that it when I click submit button or hit enter, It automatically refresh the page and shows Cannot POST /signup.
As this is my component.ts file
register(name,email,password) {
this.userService.registerUser(name, email, password).subscribe(data => {
if (data.success) {
console.log('reaches');
this.router.navigate(['user']);
} else {
console.log('error');
}
});
}
It is trying to go to the /signup path in post method but in component.ts file I give the path to '/user'
How can it automatically go-to /signup? And how to stop that.

Answer 1

Your form is trying to post data to a server. It sounds like you don't have a server which can handle the post, so you get the error.
To fix the problem, you need a server which can handle the form post.