是否必须为名称为“ invoice_name”的表单控件提供值？

问题描述

我正面临有关我的表格的问题。当我单击更新按钮时，它应该通过表单检索信息，但是我遇到以下问题：

必须为名称为'invoice_name'的表单控件提供值？

我检查了一些有关SetValue或PathValue的帮助...但是很遗憾，没有任何工作正常...

invoice-details.ts

 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,'invoice_category_id': [null,'invoice_price':    [null,});
}

      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,'invoice_category_id': [null,'invoice_price':    [null,});
}

在此函数中，您在设置this.getInvoice(this.id)的值之前正在调用this.invoiceForm。 也许更改为以下内容可能会有所帮助：

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

,

invoices.service.ts

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.page.ts

invoiceForm: FormGroup;
    id:number=0;
    name ='';
    amount ='';
    category ='';
    price ='';
    created ='';
    isLoadingResults = false;
    submitted = false;

    constructor(
      private formBuilder: FormBuilder,private route: ActivatedRoute,private router: Router,private invoiceService: InvoicesService) {}

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

      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,});
        });
      }

      onFormSubmit(){
        this.isLoadingResults = true;
        this.invoiceService.updateInvoice(this.id,this.invoiceForm.value)
          .subscribe((res:any) => {
            const id = res.id;
            this.isLoadingResults = false;
            this.router.navigate(['/invoice-details',id]);
          },(err: any) => {
            console.log(err);
            this.isLoadingResults = false
          }
         );
      }

      invoiceDetails(){
        this.router.navigate(['/invoice-details',this.id])
      }

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'],});
    });
    }