ERROR Error: Cannot find control with path: 'products -> Quantity'

Question

When I add one product in my form, show this error. My code 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),
});

Model class:

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

My HTML code:

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

In my HTML doesn't display nothing, also show my error in console.

Can you suggest what is the problem, how to solution this?

Can you paste the complete console error as part of your question? — S Raghav, Mar 19 '18 at 10:16
AddSaleFormComponent.html:83 ERROR Error: Cannot find control with path: 'products -> Quantity' at _throwError (forms.js:2432) at setUpControl (forms.js:2300) at FormGroupDirective.addControl (forms.js:6658) at FormControlName._setUpControl (forms.js:7308) at FormControlName.ngOnChanges (forms.js:7221) at checkAndUpdateDirectiveInline (core.js:12348) at checkAndUpdateNodeInline (core.js:13876) at checkAndUpdateNode (core.js:13819) at debugCheckAndUpdateNode (core.js:14712) at debugCheckDirectivesFn (core.js:14653) — , Mar 19 '18 at 10:17
can you check this? https://stackoverflow.com/questions/39679637/angular-2-form-cannot-find-control-with-path — S Raghav, Mar 19 '18 at 11:20
@Aulonna, if you're using Reactive Forms you can NOT use [(ngModel)] — Eliseo, Mar 19 '18 at 11:38
@Eliseo I remove it, My value add in array but don't display in html — , Mar 19 '18 at 12:31

score 1 · Answer 1 · edited Apr 18 '22 at 01:18

Try adding formGroupName like:

<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>
    </div>
  </tr>
</form>

score 0 · Answer 2 · answered Mar 19 '18 at 13:48

More slow I think you have a service ps that have a method getProducts() some like

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

the url/Id return you a json like, e.g.

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

Well, you must subscribe in ngOnInit to the service and, when you get the data create a 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;
}

Then your html it's like

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

See that you can use this.addForm=this.createForm() and the Form have empty values. NOTA: I use "subtotal" (not "Subtotal") choose use lowercase or CamelCase to named the variables

My service product is: getProduct(prod) { return this.products; } in first I create an array Product, that I want to show in other component sale. This products I can show in console, but doesn't display in html — , Mar 19 '18 at 15:03

ERROR Error: Cannot find control with path: 'products -> Quantity'

2 Answers2