javascript - FEL TypeError: value.forEach är inte en funktion

Jag behöver skapa ett uppdateringsformulär i Angular 6 med FormArray.

Jag använder denna kod i editfrom.TS :

  valueIngrident=new FormArray([]);

    constructor(private brandService:BrandService,private PValueInfoService:ProductinfovalueService,private productinfoService:ProductinfoService,private catService:CategoryService,private produSrvice:ProductService, private route:ActivatedRoute,private fb:FormBuilder) {
    this.id= + this.route.snapshot.paramMap.get('id');
    this.productVM=this.produSrvice.InitialProduct();

   }

  ngOnInit() {

    this.InitialForm()
    this.GetMainCat();
    }

  InitialForm(){
    this.editFG=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])],
      catId:['',Validators.compose([Validators.required])],
      brandId:['',Validators.compose([Validators.required])],
      values:this.valueIngrident
    })
    this.GetProductByID(this.id)
  }

  public GetProductByID(id:number){
    this.produSrvice.GetProductDetailById(id).subscribe((data)=>{
      this.productVM=data
      this.SelectBrand=data.brandId
      this.SelectCat=data.catId
      this.PName=this.productVM.productName
      this.editFG.setValue({
        productTitle:[data.productTitle],
        productName:[data.productName],
        color:[data.color],
        productImageName:[data.productImageName],
        price:[data.price],
        gurantyMonth:[data.gurantyMonth],
        gurantyCompanyName:[data.gurantyCompanyName],
        catId:[data.catId],
        brandId:[data.brandId],
        values:this.valueIngrident
      })
      this.ChangeFormByType(data.catId)
  })
  }

  get ValueFormControl(){
    return  this.editFG.get('values') as FormArray;
}

  public CreateValueFiled(PD:Productinfovalue[]){
    for(let element of PD )
    {
      this.valueIngrident.push(
        new FormGroup({
          infoId:new FormControl(element.infoId),
          value:new FormControl(element.value)
        })
      )
    }
}

  public ChangeFormByType(id:number){
    this.ChangeBrand(id)
      this.PValueInfoService.GetAllInfoValueForUpdate(id).subscribe(
        res=>{
          this.PD=res,
          this.CreateValueFiled(this.PD)
        }
      )
  }

Och jag använder det i HTML :

                <div class="form-inline lbin" formArrayName="values">
                <div class="form-inline lbin" *ngFor="let valueCtrl of ValueFormControl.controls; let i=index" [formGroupName]="i">
                    <div  class="form-inline lbin">
                        <label></label> 
                        <input formControlName="value" >
                    </div>
                </div>
            </div>

Men när sidan laddas visar den mig detta fel:

FEL Typfel: value.forEach är inte en funktion vid FormArray.push../node_modules/@angular/forms/fesm5/forms.js.FormArray.setValue (forms.js:3545)

Vad är problemet?

Svar #1

FormArray har funktionen setValue. Den första parametern ska vara en array. Du skickar ett objekt.

Se mitten av din funktion GetProductByID(id:number) Här kallar du this.editFG.setValue({...})

Från den officiella dokumentationen:

setValue(value: any[], options: { onlySelf?: boolean; emitEvent?: boolean; }={}): void Parametrar value any[] Array med värden för kontrollerna

alternativ objekt Konfigurera alternativ som bestämmer hur kontrollen sprider förändringar och skickar händelser efter att värdet ändras

onlySelf: När sant påverkar varje ändring endast denna kontroll, och inte dess förälder. Standard är falskt. emitEvent: När sant eller inte angivet (standard), skickar både statusChanges och valueChanges observables händelser med den senaste statusen och värdet när kontrollens värde uppdateras. När falskt skickas inga händelser. Konfigurationsalternativen skickas till metoden updateValueAndValidity. Valfritt. Standard är {}.

Returnerar inget

Din parameter är insvept i {}, vilket gör den till ett objekt. Och funktionsspecifikationen säger att den behöver vara en array.

Funktionen setValue anropar forEach på arrayen, och det finns ingen forEach för objekt, vilket är anledningen till att det står att value.forEach inte är en funktion.

Relaterade artiklar