Angular 向服务器发送空实体

Question

我正在使用 angular 和 spring boot 2。 当我尝试发送 POST 请求时，我收到了 spring 验证消息，即我的字段不能为空或 null。 这是我的 POST 表单：

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

我的角度打字稿实体：

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

 //constructor here
}

开发者服务方式：

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

AddDeveloperResponse 包含与 Request + message 相同的字段

我通过 RequestBody 在我的控制器中获取实体。 Java 实体：

    @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;

也是我在 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();
      }
    );
  }

已更新：我将 onAddDeveloper(addForm) 改为 onAddDeveloper(addForm.value)

现在我在没有验证消息的情况下捕获了 400 个

我收到错误：

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;

Answer 1

在 app.module 中导入 FormsModule

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();
      }
    );
}