Угловая отправка пустой сущности на сервер

#javascript #node.js #angular #intellij-idea

Вопрос:

Я использую угловой и пружинный загрузчик 2. Когда я пытаюсь отправить запрос на публикацию, я получаю сообщения о проверке spring, в которых говорится, что мои поля не могут быть пустыми или пустыми. вот моя почтовая форма:

 <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 содержит те же поля, что и Запрос сообщение

Я получаю сущность в своем контроллере по запросу. Сущность 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.значение)

И теперь я ловлю 400 сообщений без подтверждения

Я получаю ошибку на:

зона-вечнозеленая.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;

1. (ngSubmit)="onAddDeveloper(addForm.value)" ?

2. Я изменил его, но затем я ловлю 400 сообщений без проверки

3. можете ли вы войти addForm.value в систему и показать userService.addUser код ?

4. @Случайный вопрос обновлен. Добавлен сервис разработчиков.addDeveloper

5. можете ли вы показать результат console.log(addForm.value) , пожалуйста, в начале вашего метода onAddDeveloper ?

Ответ №1:

Импорт форммодуля в app.модуле

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>

приложение.компонент.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();
      }
    );
}