Angular 必须为名为'；发票名称'；？

我面临着一个关于我的状态的问题。当我点击更新按钮时，它应该通过表单检索信息，但我有以下问题：

必须为名为“发票\名称”的表单控件提供值

我查看了一些关于SetValue或PathValue的帮助。。。但不幸的是，一切都不顺利

发票明细表

 ngOnInit() {
    this.id = this.route.snapshot.params['id'];
    this.getInvoice(this.id);
    this.invoiceForm = this.formBuilder.group({
      'invoice_name':     [null,Validators.required],
      'invoice_amount':   [null,Validators.required],
      'invoice_category_id': [null,Validators.required],
      'invoice_price':    [null,Validators.required],
    });
}

      getInvoice(id:number){

        this.invoiceService.getInvoiceItem(id).subscribe((data:any)=> {
          console.log(this.id)
          this.id = data.id;
          this.invoiceForm.setValue({
            invoice_name : data.invoice_name,
            invoice_amount : data.invoice_amount,
            invoice_category_id: data.invoice_category_id,
            invoice_price: data.invoice_price,

          });
        });
      }

invoice-details.html

<form [formGroup]="invoiceForm" (ngSubmit)="onFormSubmit()">
    <ion-list>
      <ion-item>
        <ion-input color="light" formControlName="invoice_name" inputmode="text" placeholder="name"  name="invoice_name"></ion-input>
        <ion-icon name="mail" color="orange" size="small" slot="start"></ion-icon>
      </ion-item>
      <ion-item>
        <ion-input color="light" formControlName="invoice_amount" type="text" placeholder="amount"  name="invoice_amount"></ion-input>
        <ion-icon name="lock" color="orange" size="small" slot="start"></ion-icon>
      </ion-item>
      <ion-item> <ion-input color="light" formControlName="invoice_category_id" inputmode="text" placeholder="category"name="invoice_category_id"></ion-input>
    <ion-icon name="contact" color="orange" size="small" slot="start"></ion-icon>
  </ion-item>
  <ion-item>
    <ion-input color="light" formControlName="invoice_price" inputmode="text" placeholder="price" name="invoice_price"></ion-input>
    <ion-icon name="contact" color="orange" size="small" slot="start"></ion-icon>
  </ion-item>
</ion-list>
<br>
<ion-row>
  <ion-col width-50 style="text-align: center">
    <ion-button shape="round" color="orange"  type="submit" [disabled]="!invoiceForm.valid">SAVE</ion-button>
  </ion-col>
</ion-row>

拯救

---

我是爱奥尼亚/安格鲁的初学者

如果我们能看一看您的完整代码会更好，但有一个错误是显而易见的：

ngOnInit() {
    this.id = this.route.snapshot.params['id'];
    this.getInvoice(this.id);
    this.invoiceForm = this.formBuilder.group({
      'invoice_name':     [null,Validators.required],
      'invoice_amount':   [null,Validators.required],
      'invoice_category_id': [null,Validators.required],
      'invoice_price':    [null,Validators.required],
    });
}

在此函数中，在设置

this.invoiceForm

的值之前，您将调用

this.getInvoice（this.id）

。 也许改为以下内容会有所帮助：

ngOnInit() {
    this.id = this.route.snapshot.params['id'];
    this.invoiceForm = this.formBuilder.group({
      'invoice_name':     [null,Validators.required],
      'invoice_amount':   [null,Validators.required],
      'invoice_category_id': [null,Validators.required],
      'invoice_price':    [null,Validators.required],
    });
    this.getInvoice(this.id);
}

发票服务

getInvoices():Observable<Invoice[]> {
    return this.http.get<Invoice[]>(`${environment.apiUrl}api/invoices`)
}

getInvoice(id:number): Observable<Invoice[]>{
    return this.http.get<Invoice[]>(`${environment.apiUrl}api/invoices/${id}`)
}

getInvoiceItem(invoiceId:any): Observable<Invoice[]>{
    return this.http.get<Invoice[]>(`${environment.apiUrl}api/invoiceitems`)
    .pipe(
      map((invoiceitems : InvoiceItem[]) => invoiceitems.filter(inv => inv.invoice_id == invoiceId))
  );
}

---

invoice-edit.html仍然相同

我将invoice-edit.page.ts更改为

 getInvoice(id:number){
        this.id = this.route.snapshot.params['id'];
        this.invoiceService.getInvoiceItems(this.id).subscribe(result => {
        **this.data = result**
        ***console.log(this.data)***
        this.invoiceForm.setValue({
          name : this.data.name,
          amount : this.data.amount,
          category_id: this.data.category_id,
          price: this.data.price
        });
      });
      }

我检索数据，但是setValue不想将数据推送到变量

我找到了解决方案：

 getInvoice(){
      this.id = this.route.snapshot.params['id']
      this.invoiceService.getInvoiceItemsByUuid(this.id).subscribe(result => {
      this.data = result
      this.form.patchValue({
        name : this.data[0]['name'],
        amount : this.data[0]['amount'],
        category_id: this.data[0]['category_id'],
        price: this.data[0]['price'],
      });
    });
    }

---

如果

此.invoiceForm

是

格式数组

。它不接受

抽象控件的列表。相反，它需要与控件结构匹配的值。你能告诉我
这个.invoiceForm
类型吗。嗨，这个.invoiceFrom是==>invoiceForm:FormGroupI已经在这里创建了演示，请检查
发票[]
它将返回对象数组。请换成
发票
即可。请检查我的stackblitz我检查了你的stackblitz，这是我期望的。我通过我的服务getInvoice将发票[]更改为您告诉我的发票，但它似乎仍然不起作用。您能否从所有表单字段的html中删除所有name=“…”属性并进行检查？
 getInvoice(){
      this.id = this.route.snapshot.params['id']
      this.invoiceService.getInvoiceItemsByUuid(this.id).subscribe(result => {
      this.data = result
      this.form.patchValue({
        name : this.data[0]['name'],
        amount : this.data[0]['amount'],
        category_id: this.data[0]['category_id'],
        price: this.data[0]['price'],
      });
    });
    }