FormArray：在 angular6 中找不到具有未指定名称属性的控件

Question

我使用反应式和展示式表单创建了一个表单。当我调用提交表单的字段时，出现错误。

这个错误：

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

并在 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>

这是我在 stackblitz 中的示例代码 Demo

有什么问题吗？我该如何解决这个问题？

Answer 1

您应该使用 formArrayName 而不是 formArray:

<div formArrayName="values">

Forked Stackblitz

另外请保持变量同步：

ts

AddP: FormGroup; // why upper case?

html

[formGroup]="addP"

Javascript 是区分大小写的语言

FormArray：在 angular6 中找不到具有未指定名称属性的控件

FormArray : Cannot find control with unspecified name attribute in angular6

javascript

typescript

angular

formarray