javascript - FormArray(在 Angular6 中): return empty array

Question

我想用表单数组创建一个动态表单。当我单击此 (click)="AddInfoName()" 时，它会添加表单。

我在 html 中使用此代码:

<form class="form-line" [formGroup]="addinfoForm" (ngSubmit)="AddRole()">
                <div formArrayName="infoName">
                    <div class="description" *ngFor="let name of InfoFormGroup.controls; let NameIndex=index" [formGroupName]="NameIndex">
                    <div [formGroupName]="i" class="row">
                        <label class="form-line">  نام   :   </label>
                        <input style="margin-right: 50px;" class="form-line" pInputText id="pFaName" formControlName="infoName">
                        <app-filederrors [form]="addinfoForm" 
                            field="getInfoFormGroup(NameIndex)"
                            nicename="نام">
                        </app-filederrors>
                    </div>
                    </div>
            </div>
        </form>

并在 ts 文件中使用此代码:

 addinfoForm:FormGroup;
  infoNameList:FormArray;
  infoModel:Productdetail;

  constructor(private fb:FormBuilder,private router:Router,private tokenService:TokenstoreService) { }

  ngOnInit() {
    this.infoNameList = this.fb.array([]);
    this.InfoForm();
  }

  /**
   * AddInfoForm
   */
  public InfoForm() {
    this.addinfoForm=this.fb.group({
      infoName:this.fb.array([this.CreateInfoName()])
    })
    this.infoNameList=this.addinfoForm.get('infoName') as FormArray;
  }

  get InfoFormGroup(){
    return this.addinfoForm.get('infoName') as FormArray;
  }

  public CreateInfoName():FormGroup{
    return this.fb.group({
      infoName:['',Validators.compose([Validators.required])]
    });
  }

  public AddInfoName(){
    this.infoNameList.push(this.CreateInfoName());
    console.log('sdkjfghjkdfgh')
  }

  public RemoveInfoName(index:number){
    this.infoNameList.removeAt(index);
  }

  getInfoFormGroup(index:number):FormGroup{
    const formGroup=this.infoNameList.controls[index] as FormGroup;
    return formGroup;
  }

  AddInfo(){
    console.log('in form ==>',this.addinfoForm.value)
  }

这段代码有两个问题:

1 - 当我创建新表单时，它显示此错误:

Error: Cannot find control with path: 'infoName -> 0 -> '

2 - 返回EmptyArray。我创建了 5 个表单，但是当我单击添加数据时，它显示为空

`infoName: Array(5)
0: {infoName: ""}
1: {infoName: ""}
2: {infoName: ""}
3: {infoName: ""}
4: {infoName: ""}`

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

Answer 1

删除不必要的[formGroupName]

应该是这样的

<form class="form-line" [formGroup]="addinfoForm" (ngSubmit)="AddRole()">
    <div formArrayName="infoName">
        <div class="description" *ngFor="let name of InfoFormGroup.controls; let NameIndex=index" [formGroupName]="NameIndex">
            <div class="row">
                <label class="form-line"> نام : </label>
                <input style="margin-right: 50px;" class="form-line" pInputText id="pFaName" formControlName="infoName">
                <app-filederrors [form]="addinfoForm" field="getInfoFormGroup(NameIndex)" nicename="نام">
                </app-filederrors>
            </div>
        </div>
    </div>
</form>