FormArray : Cannot find control with unspecified name attribute in angular6

Mr-Programer

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 ?

yurzui

You should be using formArrayName instead of formArray:

<div formArrayName="values">

Forked Stackblitz

Also please keep your variables in sync:

ts

AddP: FormGroup; // why upper case?

html

[formGroup]="addP" 

Javascript is case-sensitive language

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

ERROR Error: No value accessor for form control with unspecified name attribute on switch

form control error:ERROR Error: No value accessor for form control with unspecified name attribute

Angular 2 Cannot find control with unspecified name attribute on formArrays

Cannot find control with name: formControlName in angular reactive form

Angular material stepper: Error: Cannot find control with name: 'formArray'

Angular 4 Error: Cannot find control with unspecified name attribute

primeNG p-checkbox Cannot find control with unspecified name attribute

Angular2: Cannot find form control at index 1 at FormArray

Angular 5 FormArray > Cannot find control with path: 'fields -> 0 -> name'

Angular FormArray: Cannot find control with path

No value accessor for form control with unspecified name attribute Angular 2

No value accessor for form control with unspecified name attribute

Angular: Cannot find control with name: 'date'

Angular form group: cannot find control with unspecified name attribute

Angular 7 Reactive forms "No value accessor for form control with unspecified name attribute"

Cannot find control with unspecified name attribute in angular 6 form builder

Angular 7: "Cannot find control with unspecified name attribute"

Angular 6: ERROR Error: Cannot find control with unspecified name attribute with angular material and reactive forms

Angular material Datepicker throws More than one custom value accessor matches form control with unspecified name attribute

Error: Cannot find control with unspecified name attribute

Angular Deeply Nested Reactive Form: Cannot find control with path on nested FormArray

Cannot find control with name: 'idTypesAccepted'

Angular 6 Forms Cannot find control error

Cannot find control with name: 'Salutation'

Angular Cannot find control with unspecified name attribute

ERROR Error: Cannot find control with path: Angular FormArray

Error: Cannot find control with path: 'specs -> 2' FormArray checkbox list

Angular. FormArray. Cannot find control with path: 'jobs -> 0 -> name'

Angular formArray Cannot find control with path