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