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

Question

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

Must supply a value for form control with name: 'invoice_name' ?

我查看了有关 SetValue 或 PathValue 的一些帮助...但不幸的是，没有任何工作正常...

发票-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,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,

          });
        });
      }

发票-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>

我是 ionic/angular

的初学者

Answer 1

如果我们能看到您的完整代码就更好了，但是有一个错误是可见的：

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

Answer 2

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,Validators.required],
      'invoice_amount':   [null,Validators.required],
      'invoice_category_id': [null,Validators.required],
      'invoice_price':    [null,Validators.required],
    });
    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还是老样子

Answer 3

我将 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 不想将数据推送到变量。

Answer 4

我找到了解决方案：

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

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

Must supply a value for form control with name: 'invoice_name'?

setvalue

typescript

ionic-framework

angular

formgroups