Angular send empty entity to the server

Admin 1
Viewed 2177

I am using angular and spring boot 2. When i am trying to send POST request, i am getting spring validation messages, which say, that my fields can not be empty or null. here is my POST form:

<form #addForm="ngForm" (ngSubmit)="onAddDeveloper(addForm)">
    <input type="password" ngModel name="password" placeholder="Password">
    <input type="text" ngModel name="firstName" placeholder="First name">
    <input type="text"ngModel name="lastName" placeholder="Last name">
    //submit btn here
</form>

My angular typescript entity:

export class AddUDeveloperRequest {
  firstName: string;
  lastName: string;
  password: string;

 //constructor here
}

Developer service method:

public addDeveloper(developer: AddDeveloperRequest): Observable<AddDeveloperResponse> {
    return this.http.post<AddDeveloperRequest>(`${this.apiServerUrl}/api/v2/developers`, developer);
 }

AddDeveloperResponse contains the same fields as Request + message

I am getting entity in my controller by RequestBody. Java entity:

    @NotBlank(message = "First name can not be blank")
    private String firstName;

    @NotBlank(message = "Last name can not be blank")
    private String lastName;

    @NotNull(message = "Developer password can not be null")
    private char[] password;

Also my method on ap.components.ts

  public onAddDeveloper(addForm: NgForm): void {
    // @ts-ignore
    document.getElementById('add-employee-form').click();
    this.developerService.addDeveloper(addForm.value).subscribe(
      (response: AddDeveloperResponse) => {
        console.log(response);
        this.getDevelopers();
        addForm.reset();
      },
      (error: HttpErrorResponse) => {
        alert(error.message);
        addForm.reset();
      }
    );
  }

UPDATED: I changed to onAddDeveloper(addForm) to onAddDeveloper(addForm.value)

And now i catch 400 without validation messages

I am getting error on:

zone-evergreen.js:2863

            oriAddListener.call(target, READY_STATE_CHANGE, newListener);
            const storedTask = target[XHR_TASK];
            if (!storedTask) {
                target[XHR_TASK] = task;
            }
            sendNative.apply(target, data.args); //problem line
            target[XHR_SCHEDULED] = true;
            return task;
angular node.js intellij-idea javascript
1 Answers

Import FormsModule in app.module

component.html

<form #addForm="ngForm" >
            <input type="password" [(ngModel)]="password" name="password" placeholder="Password">
            <input type="text" [(ngModel)]="first_name" name="firstName" placeholder="First name">
            <input type="text" [(ngModel)]="last_name" name="lastName" placeholder="Last name">
            <button (click)='submitForm()' >Submit</button>
    </form>

app.component.ts

password;
first_name:
last_name;

submitForm(){
let obj={
'firstname':this.first_name,
'lastname':this.lastname,
'password':this.password
}
this.developerService.addDeveloper(obj).subscribe(
      (response: AddDeveloperResponse) => {
        console.log(response);
        this.getDevelopers();
        addForm.reset();
      },
      (error: HttpErrorResponse) => {
        alert(error.message);
        addForm.reset();
      }
    );
}
user_100759450
Related