如何将表单控件值转换为角度对象？

Question

I have an endpoint which works only when I pass raw json when I call it , for example the raw json is , but the data on my frontend is coming from form data and the api does not accept it

{ "accountId": 4, "emailAddress": "wigin36937@ovooovo.com", "key": "PLFFNSWFH" }

But the api does not accept form data , so directly passing to the post request my this.verificationForm.value wont be accept and would result to error 400, what I want is how can I convert the data from verificationForm into an object like on the example above.

How do we get all the values from form data and convert it to an object before we pass it to the validateConfirmationCode param. Thanks

verificationForm = this.fb.group({
    key : [null, Validators.required],
  },{
    updateOn:'submit'
  })

#Code

 onSubmit = (transaction: string): void => {
    if (transaction == 'Verification') {
      this.verificationForm.addControl("key", new FormControl(this.code))
      this.verificationForm.addControl("accountId", new FormControl(this.accountId))
      this.verificationForm.addControl("emailAddress", new FormControl(this.email))
      this.isInProgress = true;
      this._userProfileService.validateConfirmationCode(this.verificationForm.value)
        .pipe(
          finalize(() => this.isInProgress = false),
        ).subscribe({
          next: (res) => {
            if (res.isSuccess) {
              this._notificationService.showSuccess('Success');
            }
          },
          error: err => this._notificationService.showError(err),
          complete: noop
        });

#code2

  validateConfirmationCode(data: DTO): Observable<any> {
    return this.httpRequestService.post<any>(`${apiBaseUrl}/code`, data);
  }

Answer 1

You can use an interface ICode :

export interface ICode {
    accountId: number;
    emailAddress: string;
    key: string;  
}

In the TS file you need to create an Object :

code = new Object() as ICode;

demo