FormGroup傳送資料到後端API

General
1

前端新手想請教表單資料透過httpclient以get/post的方式傳送到後端接收的問題。

目前碰到的狀況如下：
翻了官方範例和文件，以formgroup.value的方式將整個表單欄位值作傳送應該是沒有問題的。
但檢視了後端(Perl script)回傳的資料發現與預期資料不太一致，問題看起來像是無法辨識欄位導致。
後來我宣告了一個FormData變數，再將欄位值一個個append上去才成功。

想請問的是，是我對httpclient傳送資料的方式有什麼錯誤認知嗎？有什麼方式可以避免透過一個個append資料再作傳送？
我用console.log去檢視傳送的資料格式是json，用JSON.stringify去調整，結果也一樣。目前只有FormData可以讓我收到正確的回傳資料。

程式碼大致如下
Html

  <form [formGroup]="loginForm"  (ngSubmit)="login(loginForm.value)">
    <mat-form-field appearance="legacy">
      <mat-label>ID</mat-label>
      <input matInput type="text" formControlName="username">
    </mat-form-field>
    <mat-form-field appearance="legacy">
      <mat-label>Password</mat-label>
      <input matInput type="password" formControlName="password">
    </mat-form-field>
    <button mat-raised-button color="primary" type="submit">Login</button>
  </form>

Component
export class LoginComponent implements OnInit, OnDestroy {
private loginForm = new FormGroup({
username: new FormControl(’’),
password: new FormControl(’’),
});
…
login(formValue) {
this.loginService.login(formValue).subscribe(data => {
console.log(data);
},
error => {
console.log(error);
});
}
}

Service
export class LoginService {
constructor(private http: HttpClient) { }

login(formValue) {
return this.http.post(‘api/logins’, formValue, {responseType: ‘text’}}).pipe(
map(response => {
// parse xml
console.log(response);
}),
catchError(error => {
throw error;
}));
}
}

2

responseType 不需要設定

另外你所謂的預期不一致是怎樣的不一致?

3

設定responseType的原因是因為Perl回傳的資料是XML
如果不設定則會回傳HttpErrorResponse(SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse…)
設定responseType後，我就可以在map function內處理接收到的XML

與預期不一致指的是我接收到的XML顯示帳號密碼輸入錯誤，並非exception error，我也很確定過程中沒有typo

抱歉！在問題的描述上可能忽略了某些東西

4

如果要用 FormData 後端才能正確地收到，那就是後端接收 post 資料的方式只允許 FormData 的模式
httpclient 預設是傳 json 物件格式的東西到後端，另外一種驗證方式是用 postman 打

5

好的 謝謝你 :slight_smile: