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.

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 ?

#javascript #angular #typescript #forms