ASP.NET Core server not receiving params from Angular frontend post call

I'm creating a user registration form in Angular, here is the ts

import { Component } from '@angular/core';
import { AuthService } from '../_services/auth.service';

@Component({
selector: 'app-registration',
templateUrl: './registration.component.html',
styleUrl: './registration.component.css'
})
export class RegistrationComponent {
form: any = {
email: null,
password: null,
accountType: 1,
name: null,
address: null,
phone: null
};
isSuccessful = false;
isSignUpFailed = false;
errorMessage = '';

constructor(private authService: AuthService) { }

onSubmit(): void {
const { email, password, accountType, name, address, phone } = this.form;

this.authService.register(email, password, accountType, name, address, phone).subscribe({
next: data => {
console.log(data);
this.isSuccessful = true;
this.isSignUpFailed = false;
},
error: err => {
this.errorMessage = err.error.message;
this.isSignUpFailed = true;
}
});
}

}


On submit calls my authService register method (below) which should call the register-account endpoint on my API

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

const AUTH_API = 'https://localhost:7033/api/Account/';

const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable({
providedIn: 'root',
})
export class AuthService {
constructor(private http: HttpClient) { }

register(email: string, password: string, accountType: number, name: string, address: string, phone: number): Observable<any> {
return this.http.post(
AUTH_API + 'register-account',
{
email,
password,
accountType,
name,
address,
phone
},
httpOptions
);
}
}


With a breakpoint in my AccountController, the method never seems to be hit. Here is the controller

using AML.Server.Interfaces;
using AML.Server.Models;
using Microsoft.AspNetCore.Mvc;

namespace AML.Server.Controllers
{
[Route("api/[controller]")]
[ApiController]
public class AccountController : ControllerBase
{
private readonly IAccountRepository _accountRepository;

public AccountController(IAccountRepository accountRepository)
{
this._accountRepository = accountRepository;
}

[HttpPost]
[Route("register-account")]
public async Task<bool> RegisterAccount(string email, string password, AccountType accountType, string name, string address, string phone)
{
bool success = false;

if (email == "abc@hotmail.com")
{
success = true;
}

// Logic going to repo & return success response
return success;
}
}
}


It throws a 400 bad response, the response I receive in DevTools is

{
"type": "https://tools.ietf.org/html/rfc9110#section-15.5.1",
"title": "One or more validation errors occurred.",
"status": 400,
"errors": {
"name": [
"The name field is required."
],
"email": [
"The email field is required."
],
"phone": [
"The phone field is required."
],
"address": [
"The address field is required."
],
"password": [
"The password field is required."
]
},
"traceId": "00-ef5889b3c6e2444528b8799e51a3107b-8ca9bab2705e4cc0-00"
}


It seems that the parameters are not making it through, but I don't know how to resolve the issue. Does anybody have any ideas?

Continue reading...