ERROR 错误：找不到带有路径的控件：“产品-> 数量”

Question

当我在表单中添加一个产品时，显示此错误。 我的代码ts：

this.products = this.ps.getProduct();

this.addform = this.fb.group({
  'invoice_number': new FormControl('', [Validators.required, Validators.nullValidator]),
  'Subtotal': new FormControl('', Validators.required),
  'products': this.fb.array([
  ]),
  'total': new FormControl('', Validators.required),
});

模型类：

export class Sale {
    invoice_number: number;
    products: Products[];
}

我的 HTML 代码：

    <form [formGroup]="addform" (ngSubmit)="onaddsale()">
      <div class="contant">
        <div class="row">
          <div class="input-field col s4">
           <input formControlName="invoice_number" id="invoice_number" type="text" class="validate">
          </div>
    </div>
    </div>
          <tr formArrayName="products" class="group" style="cursor: pointer" *ngFor="let item of products; index as i" [formGroupName]="i">
            <td>
              <input formControlName="Subtotal" [(ngModel)]="item.Subtotal" readonly type="number" />
            </td>
            <td>
              <input formControlName="total" [(ngModel)]="item.total" readonly type="number" />
            </td>          
          </tr>
</form>

在我的 HTML 中不显示任何内容，也在控制台中显示我的错误。

你能建议是什么问题，如何解决这个问题？

Answer 1

尝试添加 formGroupName 如下：

<form [formGroup]="addform" (ngSubmit)="onaddsale()">
          <div class="contant">
            <div class="row">
              <div class="input-field col s4">
               <input formControlName="invoice_number" id="invoice_number" type="text" class="validate">
              </div>
        </div>
        </div>
              <tr formArrayName="products" class="group" style="cursor: pointer *ngFor="let item of products; index as i">
             <div [formGroupName]="i">
                <td>
                  <input formControlName="subtotal" readonly type="number" />
                </td>
                <td>
                  <input formControlName="total"  readonly type="number" />
                </td>          
              </tr>
           </div>
</form>

Answer 2

更慢 我认为你有一个服务 ps 有一个方法 getProducts() 有点像

getProduct(id:any)
{
     return this.httpClient.get("url/"+id);
}

url/Id 会返回一个类似 json 的格式，例如

'invoice_number':222152
'product':[
   {item:'some',total:120,subtotal:130},
   {item:'other',total:110,subtotal:140}
]

好吧，您必须在 ngOnInit 中订阅该服务，并在获得数据时创建一个 formGroup

ngOnInit()
{
    this.ps.getProduct('123').subscribe((data:any)=>{
        this.createform(data)
    }
}
//see that createForm is a function that return a formGroup
//this formGorup have two fields, "invoice_number" and "products"
 //products is an array. We use a function that return a array 
 //of controls and "products" is thif.fb.array(the array of controls)
createForm(data:any)
{
      return this.fb.group({
           invoice_number:[data? data.invoice_number:null,
                   [Validators.required, Validators.nullValidator]],
           products:this.fb.array(this.getProducts(data? data.products:null)
      })
}
//getProducts return an array of Controls -really an array of group controls-
getProducts(products:any)
{
   let controls[]=[];
   if (products)
   {
      products.forEach(x=>{
         controls.push(
             this.fb.group({
                  total:[x.total,Validators.required]
                  subtotal:[x.total,Validators.required]

             }
         );
      }
   }
   return controls;
}

然后你的html就像

<form [formGroup]="addform" (ngSubmit)="onaddsale()">
      <div class="contant">
        <div class="row">
          <div class="input-field col s4">
           <input formControlName="invoice_number" id="invoice_number" type="text" class="validate">
          </div>
    </div>
    </div>
          <tr formArrayName="products" class="group" style="cursor: pointer" *ngFor="let item of products; index as i" [formGroupName]="i">
            <td>
              <input formControlName="subtotal" readonly type="number" />
            </td>
            <td>
              <input formControlName="total"  readonly type="number" />
            </td>          
          </tr>
</form>

看到你可以使用 this.addForm=this.createForm() 并且表单有空值。 注意：我使用“subtotal”（不是“Subtotal”）选择使用小写或 CamelCase 来命名变量