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 ?

javascript angular typescript forms

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Angular 10/9/8 Firebase CRUD Operations with Reactive Forms

Create a student record management system app using Angular 7|8|9, Firebase 5|6 Database, Reactive Forms, Form Validation, NGX-Pagination and NGX-Toastr.

JavaScript Vs TypeScript

Get to know here difference between JavaScript & TypeScript, In this blog explained with pros and cons of TypeScript & JavaScript.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

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

Reactive Forms in Angular 10 - How to Create a Login Form using Reactive Forms

Learn the basics of reactive forms in Angular 10. In this tutorial, you'll look at how to Create a Login Form using Reactive Forms