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?

1.-remove the line this.infoNameList=this.addinfoForm.get('infoName') as FormArray; in InfoForm(), function. addInfoForm is a getter, when you write this line loose the getter. 2.-Use < form *ngIf="addinfoForm" ... > to avoid errors at very first of the component — Eliseo
– Eliseo, Commented Jan 14, 2019 at 10:58
@Yunnosch Thank you for the reminder. But I need a lot of help and I'm a bit confused. Can you guide me about that post? — Mr-Programer
– Mr-Programer, Commented Jan 19, 2019 at 8:08

John Velasquez · Accepted Answer · 2019-01-14 10:56:34Z

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>

answered Jan 14, 2019 at 10:56

John Velasquez

3,4512 gold badges21 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

FormArray ( in Angular6 ) : return empty array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related