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());
}
}
希望这对您有所帮助:)
我正在使用 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());
}
}
希望这对您有所帮助:)