Angular5 POST request to Phoenix Frramework (api), send 422 (Unprocessable Entity)

I was running Angular 5 and Phoenix framework and I’m trying to send a POST request to Phoenix. i got 422 Unprocessable error
enter image description here

I have the following code:

enrollment.component.ts

saveEnrollment()
{
    this.enrservice.saveEnrollment(this.enrollment)
        .then(
            (enrollment: Enrollment) => {
                // Show the success message
                this.snackBar.open('Enrollment success', 'OK', {
                    verticalPosition: 'top',
                    duration        : 6000
                });
          
            });
}

enrollment.component.ts

saveEnrollment(enrollment: Enrollment)
{
    return new Promise((resolve, reject) => {
        this.http.post(API_URL, enrollment)
            .subscribe((response: any) => {
                resolve(response);
            }, reject);
    });
}

enrollment.model.ts

export class Enrollment {
id: number;
firstName: string;
lastName: string;
address: string;
city: string;
state: string;
postalCode: string;

constructor(enrollment?)
{
    enrollment = enrollment || {};
    /* this.id = enrollment.id || FuseUtils.generateGUID(); */
    this.id = enrollment.id || '';
    this.firstName = enrollment.firstName || '';
    this.lastName = enrollment.lastName || '';
    this.address = enrollment.address || '';
    this.city = enrollment.city || '';
    this.state = enrollment.state || '';
    this.postalCode = enrollment.postalCode || '';
}}

and when i try to submit the form…i got that result:

[info] POST /api/enrollments
[debug] Processing with UmappWeb.EnrollmentController.create/2
Parameters: %{"address" => "", "city" => "", "firstName" => "", "id" => "", 
"lastName" => "", "postalCode" => "", "state" => ""}
 Pipelines: [:api]
[info] Sent 422 in 0┬Ás

Not sure what I’m doing wrong. please i need advise or help! thank you

this.enrollment seems to be {} for some reason.

422 is probably returned because of errors in ecto changeset? Didn’t know phoenix does this automatically. Do you have any action_fallbacks for UmappWeb.EnrollmentController?

I don’t have fallback actions, but for this case as phoenix is serving as an API, i used “Cors_plug” .
enrollment.controller.ex

  def create(conn, enrollment_params) do
    with {:ok, %Enrollment{} = enrollment} <- UME.create_enrollment(enrollment_params) do
      conn
      |> put_status(:created)
      |> put_resp_header("location", enrollment_path(conn, :show, enrollment))
      |> put_resp_content_type("application/json")
      |> render("show.json", enrollment: enrollment)
    end
  end

router.ex.

      scope "/api", UmappWeb do
        pipe_through :api
        resources "/enrollments", EnrollmentController, except: [:new, :edit]
        options   "/enrollments", EnrollmentController, :options
        options   "/enrollments/:id", EnrollmentController, :options
      end

Harrrrr, it seems the problem is the angular’s part…when i investigated the request payload part shown blank data for each input sent to the server(phoenix framework) but i don’t know where i’m wrong ///// :tired_face::tired_face:

1 Like

anyone … have an idea?

1 Like

You would need to provide more information, probably. Or try to trace this enrollment object up to its creation, and see why it is empty.

1 Like

As you said @idi527 i traced it and i fixed the code responsible of that …it was “client-side”. But the other error i got is 400 Bad request and it seems some parameters are missing in my code, but which i don’t know.
any help.?

the error message looks pretty good - "could not find matching App.Controller.create clause…

how does your create function look like in the controller?

@outlog

def create(conn, %{"enrollment" => enrollment_params}) do
    with {:ok, %Enrollment{} = enrollment} <- UME.create_enrollment(enrollment_params) do
      conn
      |> put_status(:created)
      |> put_resp_header("location", enrollment_path(conn, :show, enrollment))
      |> render("show.json", enrollment: enrollment)
    end
  end

Just copy the line from the error page, below “The request parameters are:”

Paste that into a text editor, now take your create function head parameters and paste it below that, %{"enrollment" => enrollment_params}. Can they match?

@amnu3387 like that…?
%{“address” => “s”, “city” => “s”, “firstName” => “f”, “lastName” => “s”, “postalCode” => “s”, “state” => “s”}
%{“enrollment” => enrollment_params}

yes, look at:
https://elixir-lang.org/getting-started/pattern-matching.html#pattern-matching-1

iex(3)> %{"enrollment" => enrollment_params} = %{"address" => "s", "city" => "s", "firstName" => "f", "lastName" => "s", "postalCode" => "s", "state" => "s"}
** (MatchError) no match of right hand side value:

so the clause in your create function doesn’t pattern match your params…

most likely you’ll want

def create(conn, enrollment_params) do

@outlog yes you right and i know that the create function mismatched the params… but the fact is that i’m pretty sure that correctly matched on my client-side code until proof to the contrary.
and def create(conn, enrollment_params) do will throw a 422 (unprocessable entity).

everything works now… it was due to a mismatched TYPO… on server side Repo migration in the database. that’s why i got 422 (unprocessable entity)

Thank you @all of you.