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

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

我正在使用 angular 7 动态表单,其中我从 @angular/forms 导入 FormBuilder 和 FormArray 我遇到了一些错误,我无法弄清楚我是 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(''));
}
}

我的组件 html 代码是

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

添加新行

它给我以下错误 AppComponent.html:40 错误错误:找不到名称为 'i'

的控件

这里是一个小 demo,您可以在其中添加第一个用户的可见表单,然后单击添加按钮添加更多行以添加更多用户。 很抱歉,您可以根据自己的方便添加简单的样式。

这里是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());
  }
}

希望这对您有所帮助:)