- 首页
- 其他开发
- Angular 2 Reactive Forms:找不到带有路径的控件
Angular 2 Reactive Forms:找不到带有路径的控件
[英] Angular 2 Reactive Forms: Cannot find control with path
本文介绍了Angular 2 Reactive Forms:找不到带有路径的控件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试将角色动态添加到我的用户/角色应用程序中.我有一个 Formarray，我可以在其中在编辑视图中显示用户的角色.还有一个按钮可以向用户添加更多角色.但是当我按下添加角色"按钮时，我收到此错误消息:
<块引用>
ERROR 错误:找不到带有路径的控件:'rolesArr -> 1 -> name'
在此示例中，我尝试向要创建的用户添加多个角色.
这是我的代码:
users-edit.component.html(摘录)
<div formArrayName="rolesArr" ><div class="row"><div class="col-md-10 col-md-offset-2"><button class="btn btn-default"类型=按钮"(click)="addRole()">添加角色
<br><div *ngFor="let role of roles.controls; let i=index"><div [formGroupName]="i"><div class="form-group"><label class="col-md-2 control-label" [attr.for]="i">角色</label><div class="col-md-8"><input class="form-control"[id]="我"类型=文本"占位符=角色"formControlName="名称"/>
users-edit.component.ts(摘录)
addRole() {this.roles.push(this.fb.group(new Roles()));}ngOnInit(): 无效 {this.userForm = this.fb.group({用户名:['', [Validators.required, Validators.minLength(3)]],名字:['', [Validators.required, Validators.minLength(3)]],姓氏:['', [Validators.required, Validators.minLength(3)]],密码:['', [Validators.required, Validators.minLength(10)]],rolesArr: this.fb.array([])});this.sub = this.activeRoute.params.subscribe(参数 =>{让 id = +params['id'];//将字符串id"转换为数字this.getUser(id);});}getUser(id: number) {this.userService.getUser(id).subscribe(用户 =>this.onUserRetrieved(用户));}onUserRetrieved(用户:用户):无效{console.log("OnUserRetrieved:" + user.firstname);如果(this.userForm){this.userForm.reset();}this.users = 用户；如果(this.users.id === 0){this.pageTitle = '添加用户';} 别的 {this.pageTitle = `编辑用户:${this.users.username}`;}//更新表单上的数据this.userForm.patchValue({用户名:this.users.username，名字:this.users.firstname，姓氏:this.users.lastname，密码:this.users.password});const roleFGs = this.users.roles.map(roles => this.fb.group(roles));const roleFormArray = this.fb.array(roleFGs);this.userForm.setControl('rolesArr', roleFormArray);}
我做错了什么?
解决方案
您应该创建一个包含 Roles 控件的表单组，如下所示，
createRole() : FormGroup {返回 this.fb.group({姓名: ''，类型: ''，});}
那么你应该推送如下角色，
addRole() {this.roles.push(this.createRole());}
I try to dynamically add Roles to my User/Roles-application. I have a Formarray where i can show the Roles of the User in the Edit View. And there is a button for adding more Roles to the User. But when i press the button "Add Role", i got this error message:
ERROR Error: Cannot find control with path: 'rolesArr -> 1 -> name'
In this example, i try to add more than one Role to a User that i want to create.
Here is my Code:
users-edit.component.html (excerpt)
<div formArrayName="rolesArr" >
<div class="row">
<div class="col-md-10 col-md-offset-2">
<button class="btn btn-default"
type="button"
(click)="addRole()">Add Role
</button>
</div>
</div>
<br>
<div *ngFor="let role of roles.controls; let i=index">
<div [formGroupName]="i">
<div class="form-group">
<label class="col-md-2 control-label" [attr.for]="i">Role</label>
<div class="col-md-8">
<input class="form-control"
[id]="i"
type="text"
placeholder="Role"
formControlName="name" />
</div>
</div>
</div>
</div>
users-edit.component.ts (excerpt)
addRole() {
this.roles.push(this.fb.group(new Roles()));
}
ngOnInit(): void {
this.userForm = this.fb.group({
username: ['', [Validators.required, Validators.minLength(3)]],
firstname: ['', [Validators.required, Validators.minLength(3)]],
lastname: ['', [Validators.required, Validators.minLength(3)]],
password: ['', [Validators.required, Validators.minLength(10)]],
rolesArr: this.fb.array([])
});
this.sub = this.activeRoute.params.subscribe(
params => {
let id = +params['id']; //converts string'id' to a number
this.getUser(id);
}
);
}
getUser(id: number) {
this.userService.getUser(id).subscribe(
user => this.onUserRetrieved(user)
);
}
onUserRetrieved(user: User): void {
console.log("OnUserRetrieved: " + user.firstname);
if (this.userForm) {
this.userForm.reset();
}
this.users = user;
if (this.users.id === 0) {
this.pageTitle = 'Add User';
} else {
this.pageTitle = `Edit User: ${this.users.username}`;
}
//Update the data on the form
this.userForm.patchValue({
username: this.users.username,
firstname: this.users.firstname,
lastname: this.users.lastname,
password: this.users.password
});
const roleFGs = this.users.roles.map(roles => this.fb.group(roles));
const roleFormArray = this.fb.array(roleFGs);
this.userForm.setControl('rolesArr', roleFormArray);
}
What am i doing wrong?
解决方案
You should create a form group with the controls for Roles as below,
createRole() : FormGroup {
return this.fb.group({
name: '',
type: '',
});
}
Then you should push the role as below,
addRole() {
this.roles.push(this.createRole());
}
这篇关于Angular 2 Reactive Forms:找不到带有路径的控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
