Невозможно использовать метод patchValue в Angular Forms

Question

Данные не отображаются на странице редактирования.Я получил данные из API, и эти данные я также могу получить в файле service.ts, но не могу отобразить их на странице редактирования.

Edit.customer.ts

import { Component, OnInit } from '@angular/core';
import { CustomerService } from './customer.service';
import { Customer } from '../models/customer.model';
import { FormBuilder, FormGroup, Validators, FormControl } from "@angular/forms";
import { Router } from "@angular/router";
import { first } from "rxjs/operators";

@Component({
  selector: 'app-edit-customer',
  templateUrl: './edit-customer.component.html',
  styleUrls: ['./edit-customer.component.css']
})
export class EditCustomerComponent implements OnInit {

  customer: Customer;
  editForm: FormGroup;

  constructor(private formBuilder: FormBuilder, private router: Router, private _customerService: CustomerService) { }

  ngOnInit() {
    let id = localStorage.getItem("editCustomerId");
    if (!id) {
      alert("Invalid Action")
      this.router.navigate(['list']);
      return;
    }
    this.editForm = this.formBuilder.group({
      customerId: [],
      name: new FormControl('', [Validators.required]),
      email: ['', Validators.required],
      primaryPhone: ['', Validators.required],
      alternatePhone: [''],
      address1: ['', Validators.required],
      address2: ['', Validators.required],
      address3: [''],
      city: ['', Validators.required],
      state: ['', Validators.required],
      country: ['', Validators.required],
      zip: ['', Validators.required],
    });    
    this._customerService.getCustomerById(+id).subscribe(data => {
      this.editForm.patchValue(data);
      console.log(data);
    });
  }
  onSubmit() {
    this._customerService.updateCustomer(this.editForm.value)
      .pipe(first())
      .subscribe(
        data => {
          this.router.navigate(['list']);
        },
        error => {
          alert(error);
        });
  }
}

Answer 1

Вы должны определить ключ для метода PatchValue:

Например:

this.yourform.patchValue({key : "value" });

Вы также можете сделать это динамически, с помощью

this.yourform.patchValue({[key] : [value]});

В вашем случае:

// This is your data from API
var data = {
  name: "Prashant",
  email: "prashantpimpale93@gmail.com"
}

// use the patch value with dynamic keys
Object.keys(data).forEach(key => {
  this.editForm.patchValue({ [key]: data[key] });
})

С данными из службы API:

this._customerService.getCustomerById(id).subscribe(value => {
  if (value) {
     this.data = value;
  }
});

// Then use patchValue
Object.keys(this.data).forEach(key => {
   this.editForm.patchValue({ [key]: this.data[key] });
})

Пример StackBlitz

РЕДАКТИРОВАТЬ:

Когда я проверил ваш код, API возвращает список объектов [который не должен],

Просто замените ваш API следующим:

this.userService.getCustomerById(id).subscribe(value => {
  if (value) {
    // the value is an array just get the first item from list
    this.data = value[0];
    Object.keys(this.data).forEach(Key => {
    this.editForm.patchValue({ [Key]: this.data[Key] })
    })
  }
})

Я проверил в своей местности!