Как отправить http-запрос с помощью FormData в Angular 8? - PullRequest
Новая
       14

Как отправить http-запрос с помощью FormData в Angular 8?

0 голосов
/ 13 января 2020

Здесь я хочу отправить некоторые данные из моей формы html на сервер, используя сервер angular HTTPClient. Я использовал этот код, но не отправлял свои данные на бэкэнд-сервер.

HTML

 <form class="border text-center p-5 reg-frm" [formGroup]="ContactusForm">
    <label>Full name :</label>
    <input type="text" class="form-control box_border" aria-describedby="textHelp"
                                    name="name" formControlName="name">
    <button (click)="sendMessage()" type="button"
        class="btn btn-info my-4 btn-block reg_btn ">Send Message</button>

 </form>

Файл TS 

sendMessage(){
ContactusForm = this.fb.group({
    name: ['', [Validators.required, Validators.maxLength(100)]],
})

const formData = new FormData();
formData.append('name', this.ContactusForm.value.name)

this.http.post<any>(url, formData).subscribe(res => {
   console.log("data send");
});
}

1 Ответ

1 голос
/ 13 января 2020

Эта практика кодирования не подходит, не инициализируйте formGroup внутри метода sendMessage, вместо этого попробуйте это

Сначала используйте отдельный метод для инициализации данных формы, для этого сначала импортируйте FormGroup и другие необходимые вещи, затем объявите переменная / свойство formGroup 

import { FormGroup, FormBuilder, Validators } from '@angular/forms';


//declare property
constactUsPayload: FormGroup;

//In Oninit- initialize payload.
ngOnInit(){
  this.initialize_payload();
}

initialize_payload() {
  this.contactUsPayload = this._fb.group({
    'name': this._fb.control('', Validators.required, Validators.maxLength(100)]),
  });//you can declare more fields based on your future requirements
}

sendMessage(){
  this.http.post<any>(url, this.contactUsPayload.value.name).subscribe(res => {
    console.log("data send");
  });
}
...