I am using dynamic form in angular 7 it gives me the ERROR Error: Cannot find control with name: 'i'

Question

i am using angular 7 dynamic form in which i import FormBuilder and FormArray from @angular/forms i am facing some error that i can not figure out i am new in angular

import { Component } from '@angular/core';
import {FormBuilder, FormArray} from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {

constructor(private fb:FormBuilder){}

users = this.fb.group({
user_fname:this.fb.array([]),
user_lname:this.fb.array([]),
user_conatact:this.fb.array([]),
user_email:this.fb.array([])
});
 get UserFirstName()
 {
 return this.users.get('user_fname') as FormArray;
 }
get UserLastName()
{
 return this.users.get('user_lname') as FormArray;
}
 get UserContact()
{
 return this.users.get('user_conatact') as FormArray;
}
get UserEmail()
{
 return this.users.get('user_email') as FormArray;
}
addNewUserRow()
{
this.UserFirstName.push(this.fb.control(''));
this.UserLastName.push(this.fb.control(''));
this.UserEmail.push(this.fb.control(''));
this.UserContact.push(this.fb.control(''));
}
}

and my component html code is

<div class="container">
<h1>User Registeration Form</h1>
<hr />
{{users.value | json}}
 <form [formGroup]="users">
 <div class="row">

   <div class="col-md-3">
     <div class="form-group">
       <label for="first-name">First Name</label>
       <input type="text" class="form-control">
     </div>
   </div>

   <div class="col-md-3">
      <div class="form-group">
        <label for="last-name">Last Name</label>
        <input type="text" class="form-control">
      </div>
    </div>

    <div class="col-md-3">
        <div class="form-group">
          <label for="last-name">Contact No</label>
          <input type="text" class="form-control">
        </div>
      </div>

      <div class="col-md-3">
          <div class="form-group">
            <label for="last-name">Email Address</label>
            <input type="text" class="form-control">
          </div>
        </div>



        <div formControlArray="user_fname" *ngFor="let fname of UserFirstName.controls; let i=index;" class="col-md-3">
            <div class="form-group">
              <label for="">First Name</label>
              <input type="text"  class="form-control" formControlName="i">
            </div>
        </div>

          <div formControlArray="user_lname" *ngFor="let fname of UserLastName.controls; let i=index;" class="col-md-3">
             <div class="form-group">
               <label for="last-name">Last Name</label>
               <input type="text" class="form-control">
             </div>
           </div>

           <div formControlArray="user_contact" *ngFor="let fname of UserContact.controls; let i=index;" class="col-md-3">
               <div class="form-group">
                 <label for="last-name">Contact No</label>
                 <input type="text" class="form-control">
               </div>
             </div>

             <div formControlArray="user_email" *ngFor="let fname of UserEmail.controls; let i=index;" class="col-md-3">
                 <div class="form-group">
                   <label for="last-name">Email Address</label>
                   <input type="text" class="form-control">
                 </div>
               </div>

</div>
</form>

Add New Row

and it,s give me the following error AppComponent.html:40 ERROR Error: Cannot find control with name: 'i'

Answer 1

Here i a small demo where you have a form visible to add first user and then you click add button to add more rows to add more users. Sorry for the plain styling you can add that according to you convenience.

Here is the HTML

<form [formGroup]="usersForm">
    <div *ngFor="let user of userControls; let i=index" [formGroup]="user">
        <div class="col-md-3">
            <div class="form-group">
                <label for="first-name">First Name</label>
                <input formControlName="firstName" type="text" class="form-control">
     </div>
        </div>

        <div class="col-md-3">
                <div class="form-group">
                    <label for="last-name">Last Name</label>
                    <input formControlName="lastName"  type="text" class="form-control">
      </div>
        </div>

        <div class="col-md-3">
                <div class="form-group">
                        <label for="last-name">Contact No</label>
                        <input formControlName="contact" type="text" class="form-control">
        </div>
        </div>

        <div class="col-md-3">
                <div class="form-group">
                            <label for="last-name">Email Address</label>
                            <input formControlName="email" type="text" class="form-control">
        </div>
        </div>
    </div>

  <button (click)="addNew()">Add New User</button>
</form>

<h6>Form value</h6>
{{value | json }}

Componenet.ts

import { Component } from '@angular/core';
import { FormBuilder, FormArray,FormGroup  } from '@angular/forms';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  usersForm: FormGroup;
  constructor(private formBuilder: FormBuilder){
    this.usersForm = this.formBuilder.group({
    users: this.formBuilder.array([
        this.createUserRow()
      ])
    });
  }
  get userControls(){
    return  (this.usersForm.get('users') as FormArray).controls
  }

  get value(){
   return this.usersForm.getRawValue();
  }

  createUserRow(){
    return this.formBuilder.group({
      firstName: [null],
      lastName:[null],
      contact:[null],
      email:[null]
    })
  }

  addNew(){
     (this.usersForm.get('users') as FormArray).controls.push(this.createUserRow());
  }
}

Hope this helps :)