时间戳

首页 > 解决方案 > 以角度 6 更新反应式表单数据

angular - 以角度 6 更新反应式表单数据

问题描述

无法在我的 Angular 6 中对反应式表单进行更新操作。目前，我根据客户 ID 获取数据并显示在编辑页面中。但是当我点击提交操作时，我的旧数据没有任何变化。即使我在控制台中也没有收到任何错误消息。这是我用于更新表单数据的 customer.ts 代码。

onSubmit() {
this._customerService.updateCustomer(this.editForm.value)
  .pipe(first())
  .subscribe(
    data => {
      this.router.navigate(['list']);
    },
    error => {
      alert(error);
    });
}

这是 customer.service.ts 的代码

updateCustomer(customer: Customer) {
let body = {
  "name": customer.name,
  "email": customer.email,
  "primaryPhone": customer.primaryPhone,
  "alternatePhone": customer.alternatePhone,
  "address1": customer.address1,
  "address2": customer.address2,
  "address3": customer.address3,
  "city": customer.city,
  "state": customer.state,
  "country": customer.country,
  "zip": customer.zip,
};
return this.http.put(this._global.baseUrl + '/Customer/UpdateCustomer/' + customer.customerId, body, this._global.httpOptions).catch(this.handleErrorObservable);
 }

标签： angularforms

解决方案

鉴于问题中的信息很少，只是疯狂猜测，但是您是否正确设置了 html 表单？

例如

<form [formGroup]='editForm' (ngSubmit)='submit()'>
  <mat-form-field>
    <input matInput formControlName='name' />
  </mat-form-field>

  <button>Submit</button>
</form>

按钮需要在<form></form>标签内，ngSubmit需要调用submit()函数等。

（还有很多其他方法可以正确设置html表单，但重点是表单需要正确设置）

推荐阅读