FormArray : Cannot find control with unspecified name attribute in angular6

FormArray : Cannot find control with unspecified name attribute in angular6

I created a form using the reactive and presentation form. When I invoke the fields for the submission form, this gives me the error.

I created a form using the reactive and presentation form. When I invoke the fields for the submission form, this gives me the error.

this Erorr :

Cannot find control with unspecified name attribute
    addProductFG:FormGroup;
  cats:Category[];
  subCats:Category[];
  PD:Productdetail[];
  selectedCat:number;
  valueIngrident=new FormArray([]);
  public loading=false;

constructor(private fb:FormBuilder,private productService:ProductinfoService,private catService:CategoryService) { }

ngOnInit() { this.loading=true; this.InitialFrom(); this.GetMainCat(); }

public CreateValueFiled(PD:Productdetail[]){ PD.map(element => { this.valueIngrident.push( new FormGroup({ infoId:new FormControl(element.id), value:new FormControl('') }) ) }); }

public GetMainCat(){ this.catService.GetMainCat().subscribe( res=>{ this.cats=res; this.loading=false; } ) }

get ValueFormControl(){ return this.addProductFG.get('values') as FormArray; }

public InitialFrom():FormGroup{

this.addProductFG=this.fb.group({
  productTitle:['',Validators.compose([Validators.required])],
  productName:['',Validators.compose([Validators.required])],
  color:['',Validators.compose([Validators.required])],
  productImageName:['',Validators.compose([Validators.required])],
  price:['',Validators.compose([Validators.required])],
  gurantyMonth:['',Validators.compose([Validators.required])],
  gurantyCompanyName:['',Validators.compose([Validators.required])],
  values:this.valueIngrident
})
return this.addProductFG;

} public ChangeSubCat(id:number){ this.loading=true; this.catService.GetSubCatByCatId(id).subscribe( res=>{ this.subCats=res; this.loading=false; } ) }

public ChangeFormByType(id:number){ this.loading=true; this.productService.GetPCIBySubId(id).subscribe( res=>{ this.PD=res, this.CreateValueFiled(this.PD), this.loading=false; } ) }

and in HTML :

       <div formArray="values">
                <div *ngFor="let valueCtrl of ValueFormControl.controls; let i=index" [formGroupName]="i">
                    <div  class="form-inline lbin">
                        <label>g </label>
                        <input formControlName="value" >
                    </div>
                </div>
            </div>

and And this is my sample code in stackblitz Demo

Whats the Problem ? How Can I Solve This problem ?

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Angular 8 Forms - How to Validate Forms in Angular using Form Builders

In this Angular 8 forms tutorial gives an overview of the form builder in Angular 8 and how to validate forms in Angular 8 using form builders

What TypeScript taught me about JavaScript

What TypeScript taught me about JavaScript. TypeScript was designed to make the most sense out of any JavaScript code. How void behaves in both TypeScript and JavaScript. What Symbols are and why they can be unique. Why substitutability is such an important concept for TypeScript

Manage reactive form controls with form groups in Angular 8

We explain how you can divide form controls by form groups in Angular 8, providing a platform to easily access the template element as groups.