Question

我可能写错了。我正在使用Client Form函数

中API的响应填充NgOnInit

  ngOnInit() {
    this.indexForm = new FormGroup({
      name: new FormControl(Validators.required),
      status: new FormControl(),
      logo: new FormControl()
    });
    this.activatedRoute.params
      .switchMap((params: Params) => this.clientService.getClientById(params['id']))
      .subscribe((client: any) => {
        this.indexForm.patchValue({
          name: client.name,
          status: client.status,
          logo: client.logo
        })
      });
  };

然后，用户可以修改表单，然后重新提交。

服务修改

  editClientById(client:any): Observable<Client> {
    return this.authToken.patch('clients/' + client.id, client)
      .map(res => res.json())
      .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
  }

组件编辑

  editClientById(event): any {
    this.clientService.editClientById(this.indexForm.value)
      .subscribe( client => {
          console.log('Success! Save' + client)
        },
        error => this.errorMessage = <any>error);
  };

我是控制台 - 记录它进行测试，但由于显而易见的原因它无法正常工作。我将indexForm传递给editClientById变量，这两个看起来都是正确的，对我来说不合适。

正在响应ngOnInit函数的有效负载类似于 {id: 13, name: "fdsf", status: "dsf", logo: "dsf"} 所以对我来说client.id应该存在。目前，点击后，由于clients\undefined does not exist意味着ClientID未正确传递，我收到404.

我是否使用Observables / models处理不当？也许是因为我没有表格上的'id'？

更新

正如预期的那样，如果我使用客户端ID放置一个隐藏字段，它确实有效 - 但是，它将ID作为表单值提交。是否有更多的Angular方法，或者这是正确的方法吗？

Answer 1

此代码：

this.indexForm = new FormGroup({
  name: new FormControl(Validators.required),
  status: new FormControl(),
  logo: new FormControl()
});

是否为包含每个控件的表单及其值创建数据结构。所以像这样：

{name: "fdsf", status: "dsf", logo: "dsf"}

请注意，id属性不会存在，因为它不是已定义数据结构中的控件。上面对象中的属性名称与构建表单组时为控件提供的名称完全匹配。

我使用这样的代码：

        // Copy the form values over the product object values
        let p = Object.assign({}, this.product, this.productForm.value);

将原始值（包括id）与表单组数据结构中的值合并。

这行代码以空对象（第一个参数）开头。它使用产品更新该对象的内容（第二个参数）。然后它会覆盖表单中的任何匹配属性（第三个参数）。

Angular4 - 将变量和表单内容传递给服务

1 个答案: