【问题标题】:Angular Form Array, first Index always nullAngular 表单数组,第一个索引始终为空
【发布时间】:2018-05-23 02:20:24
【问题描述】:

请协助,我正在尝试使用角度表单数组查看从组件到视图的数据。以下解决方案:Angular 5 FormArray get data from database and show rows。帮助了我,但现在我遇到了一个问题,表单数组的第一个索引始终为空,并且我收到以下错误:

ERROR Error: Cannot find control with path: '[object Object] -> 0'
at _throwError (forms.js:2432)
at setUpFormContainer (forms.js:2405)
at FormGroupDirective.addFormGroup (forms.js:6691)
at FormGroupName.AbstractFormGroupDirective.ngOnInit (forms.js:2568) 
...

Cannot read property 'controls' of undefined
at Object.eval [as updateDirectives] 
...

在我的 ngOnInit 中,我只有以下内容:

this.SectionForm= this.formBuilder.group({
  sectionData: this.formBuilder.array([this.buildDevelopmentSector()])
});

this.activatedRoute.params.subscribe(res =>
  // get data and push the data to a formArray called sectionDataArray
  this.GetDataFromApi(res.requestId)
);

视图有以下部分:

  <div [formGroup] ="SectionForm">
    <div [formArrayName]="sectionDataArray">
      <div *ngFor="let section of sectionDataArray.controls ; let i = index" [formGroupName]="i">
          ...
          ...
          ...
        </div>

查看日志我看到以下内容:

  0:
     amount:""
     percentage:""
     name:""
     quantity:""
     __proto__:Object 

  1:
     amount:1200000
     percentage:23
     name: "Repo"
     quantity:20000
     __proto__:Object

  length:2
     __proto__:Array(0)

【问题讨论】:

    标签: angular angular5 angular-reactive-forms


    【解决方案1】:

    你的支持对象有

    sectionData: this.formBuilder.array([this.buildDevelopmentSector()])
    

    所以它是sectionData,但你在这里指的是sectionDataArray

    <div [formArrayName]="sectionDataArray">
    

    改成sectionData

    【讨论】:

    • 并从[formArrayName]中删除方括号
    • 或者改成[formArrayName]='sectionData'" :)
    • 或者在组件 sectionData:string = 'sectionData' 上创建一个属性 :)
    • 管理对错误进行排序,我收到错误的原因是因为我没有调用或初始化sectionDataArray onInit。谢谢。
    • 嗯,基本上就是我写的 - 你指的是未定义的属性。
    猜你喜欢
    • 2018-02-10
    • 1970-01-01
    • 2022-07-04
    • 1970-01-01
    • 1970-01-01
    • 2014-10-04
    • 1970-01-01
    • 2012-02-05
    • 1970-01-01
    相关资源
    最近更新 更多