无法将具有反应形式的表单数据发送到 angular 中的 api 端点 6

Question

我正在学习 Angular 6 并在 Django 中创建了 REST API。

我必须向服务器发送 JSON 格式的表单数据。

这就是我在组件中所做的。

my.component.ts

import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
import {AmountGivenService} from '../amount-given.service';
import {ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-amount-given-add',
  templateUrl: './amount-given-add.component.html',
  styleUrls: ['./amount-given-add.component.css']
})
export class AmountGivenAddComponent implements OnInit {

  addMoneyForm: FormGroup;
  submitted = false;
  contact_id: string;

  constructor(
    private formBuilder: FormBuilder,
    private amountGivenService: AmountGivenService,
    private route: ActivatedRoute
  ) { }

  ngOnInit(): void {

    this.route.params.subscribe(
      param => {
        this.contact_id = param['contact_id'];
      }
    );

    console.log(this.contact_id);

    this.addMoneyForm = this.formBuilder.group({
      amount: new FormControl('', [
        Validators.required
      ]),
      duration: new FormControl()
    });
  }

  get f() {
    return this.addMoneyForm.controls;
  }

  onSubmit() {
    this.submitted = true;

    // stop here if form is invalid
    if (this.addMoneyForm.invalid) {
      console.log('invalid');
      return;
    }

    console.log(this.addMoneyForm.getRawValue());

    let data = this.addMoneyForm.value;
    data = JSON.parse(data);

    // append contact_id
    data.contact_id = this.contact_id;
    data = JSON.stringify(data);

    this.amountGivenService.add(data).subscribe(res => {
      console.log('req completed', res);
    });
  }

}

在发送请求之前，我需要附加 contact_id.

但是在提交表单时，页面刷新并以 GET 方法提交表单。

正在从上面的组件文件中删除此代码元素，并且正在将请求发送到服务器。

data = JSON.parse(data);

// append contact_id
data.contact_id = this.contact_id;
data = JSON.stringify(data);

如何将值附加到组件中的表单数据？

Edit 2: my.component.html

<form [formGroup]="addMoneyForm" (submit)="onSubmit()" id="form-add-money" #formDir="ngForm">

    <label for="input-amount">Amount</label>
    <input formControlName="amount"
           id="input-amount"
           class="form-control"
           placeholder="Amount">
    <div *ngIf="submitted && f['amount'].invalid" class="text-danger">
        <div *ngIf="f['amount'].errors.required">Amount is required</div>
        </div>
    </div>

    <label for="input-duration">Duration (in days)</label>
    <input formControlName="duration" type="number" id="input-duration" class="form-control" placeholder="Duration (in days)">

</form>

<button class="btn btn-success" type="submit" form="form-add-money" [disabled]="!formDir.valid">
    <i class="fa fa-save">Save</i>
</button>

Answer 1

let data = this.addMoneyForm.value;
data = JSON.parse(data);

// append contact_id
data.contact_id = this.contact_id;
data = JSON.stringify(data);

this.amountGivenService.add(data).subscribe(res => {
  console.log('req completed', res);
});

这没有什么意义：

表单的值不是 JSON 字符串。它是一个对象。解析对象毫无意义
你的 amountGivenService 不应该（显然也不）将 JSON 字符串作为参数。它应该（显然确实）采用类型化对象。

你应该有的就是

const data = this.addMoneyForm.value;
data.contact_id = this.contact_id;

this.amountGivenService.add(data).subscribe(res => {
  console.log('req completed', res);
});

此外，在您的模板中，提交按钮位于表单之外。一定在里面。

无法将具有反应形式的表单数据发送到 angular 中的 api 端点 6

unable to send form data with reative form to api endpoint in angular 6

angular

angular6

angular-forms