Angular 2反应形式:找不到带有路径的控件 [英] Angular 2 Reactive Forms: Cannot find control with path
问题描述
我尝试将角色动态添加到我的用户/角色应用程序.我有一个Formarray,可以在编辑"视图中显示用户的角色.还有一个用于向用户添加更多角色的按钮.但是,当我按下添加角色"按钮时,出现了以下错误消息:
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:
错误错误:找不到路径为'rolesArr-> 1-> name'的控件
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.
这是我的代码:
users-edit.component.html (摘录)
<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 (摘录)
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);
}
我在做什么错了?
推荐答案
您应使用下面的Roles
控件创建表单组,
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反应形式:找不到带有路径的控件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!