I am encountering an issue when trying to send register form data to my server as I keep receiving a (Bad Request) error. Interestingly, the server works correctly when tested with postman using the following data:
{
"username": "root",
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="394b56564d795e54585055175a56">[email protected]</a>",
"password": "Pesho@"
}
However, I am facing problems with Angular and unable to locate where the issue lies.
This is register.component.ts:
export class RegisterComponent implements OnInit {
public registerFormGroup: FormGroup;
constructor(
private readonly auth: AuthService,
) { }
ngOnInit() {
this.registerFormGroup = this.auth.registerFormGroup(this.registerFormGroup);
}
public register(username: string, email: string, password: string) {
this.auth.register(username, email, password);
console.log({username});
console.log({email});
console.log({password});
}
}
This is auth.service.ts:
public register(username: string, password: string, email: string): Subscription {
return this.http.post('http://localhost:3000/auth',
{
username,
email,
password,
})
.subscribe(
(success: any) => {
this.notificator.success(success.message);
setTimeout(() => {
this.login(email, password);
}, 1500);
}
,
(err) => {
this.notificator.error(err.error.message);
}
);
}
Below is the HTML for the small register form - register.component.html:
<form class="example-form" [formGroup]="this.registerFormGroup"
(ngSubmit)="this.register(name.value, email.value, password.value)" autocomplete="off">
<mat-card-content>
<mat-form-field class="example-full-width">
<input matInput #name autocomplete="off" formControlName="name" type="text" class="form-control"
placeholder="Name *">
</mat-form-field>
<mat-form-field class="example-full-width">
<input matInput #email autocomplete="off" #email matInput class="form-control" placeholder="Email *" type="email"
formControlName="email">
</mat-form-field>
<mat-form-field class="example-full-width">
<input matInput #password formControlName="password" type="password" class="form-control" placeholder="Password *">
</mat-form-field>
</mat-card-content>
<button mat-stroked-button color="accent" class="btn-block" type="submit" value="Sign Up">Register</button>
</form>
To debug the issue, I included some console logs to verify the data being sent through the form:
{username: "root"} username: "root" proto: Object
{email: "[email protected]"} email: "[email protected]" proto: Object
{password: "Pesho@"} password: "Pesho@" proto: Object
I had successfully implemented a similar logic in a previous Bootstrap project, but seem to face challenges with Material in this case. However, based on the lack of errors in the NestJS server terminal, it does not appear to be related to Material design.