FormArray ( in Angular6 ) : return empty array

Question

I want to create a dynamic form with form array . When I click this (click)="AddInfoName()" it add form .

I am using this code in 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>

And using this code in ts file :

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

I have tow problem with this code :

1 - when I create a new form it show me this Error :

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

2 - return EmptyArray. I create 5 Form but when I click for add data it show me empty

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

Whats the problem ? How can I solve problems?

Answer 1

remove the unnecessary [formGroupName]

should be like this

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