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

odyright

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

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

13 comments

/phoenix #frontend

0 5314 13

2018-03-06 15:38:47 UTC

Showing Posts 1 to 10

Show Best Posts
Show All (oldest first)
Show All (newest first)

idi527

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?

Post #1

odyright

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

Post #2

odyright

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 /////

Post #3

odyright

anyone .. have an idea?

Post #4

idi527

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.

Post #5

odyright

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.?

Post #6

outlog

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

how does your create function look like in the controller?

Post #7

odyright

@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

Post #8

amnu3387

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?

Post #9

odyright

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

Post #10

Load more posts (3 remaining)