FormArray: не удается найти элемент управления с неопределенным атрибутом имени в angular6

Question

Я создал форму, используя реактивную форму и форму представления. Когда я вызываю поля для формы отправки, это дает мне ошибку.

это Erorr:

Не удается найти элемент управления с неопределенным атрибутом имени

    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;
        }
      )
  }

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

и это мой пример кода в демонстрации стекаблиц

В чем проблема? Как я могу решить эту проблему?

Answer 1

Вы должны использовать formArrayName вместо formArray:

<div formArrayName="values">

Разветвленный стекблиц

Также, пожалуйста, держите ваши переменные в синхронизации:

Т.С.

AddP: FormGroup; // why upper case?

HTML

[formGroup]="addP" 

Javascript - это регистрозависимый язык