javascript - 角度动态表单添加嵌套表单数组
问题描述
我正在尝试创建一个动态表单,您可以在其中动态添加表单,并动态添加子表单。例如:
+ user1
--- + color1
--- + color2
--- + color3
+ user2
--- + color1
--- + color2
--- + color3
+ user 3
--- + color1
您可以根据需要添加任意数量的用户,并且可以为每个用户添加任意数量的颜色。我可以让第一个数组工作(用户),但不确定嵌套数组(颜色)。我已经设置好了,所以它会在开始时加载用户和颜色。这是我到目前为止的代码:
export class FormsComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
email: '',
users: this.fb.array([])
})
}
get userForms() {
return this.myForm.get('users') as FormArray
}
get colorForms() {
return this.userForms.get('colors') as FormArray
}
addUser() {
const userGroup = this.fb.group({
user: [],
colors: this.fb.array([])
})
this.userForms.push(userGroup);
}
deleteUser(i) {
this.userForms.removeAt(i);
}
addColor() {
const colorGroup = this.fb.group({
color: []
})
this.colorForms.push(colorGroup);
}
deleteColor(i) {
this.colorForms.removeAt(i)
}
}
这是我的html代码:
<form [formGroup]="myForm">
<hr>
<input formControlName="email">
<div formArrayName="users">
<div *ngFor="let user of userForms.controls; let i=index" [formGroupName]="i">
<input formControlName="user">
<button (click)="deleteUser(i)">Delete User</button>
<div formArrayName="colors">
<div *ngFor="let color of colorForms.controls; let t=index" [formGroupName]="t">
<input formControlName="color">
<button (click)="deleteColor(t)">Delete Color</button>
</div>
</div>
</div>
</div>
<button (click)="addUser()">Add User</button>
</form>
显然这不起作用,所以我试图理解我需要做什么。
解决方案
它不起作用,因为您没有考虑存储控件的索引。
例如
get colorForms() {
return this.userForms.get('colors') as FormArray
}
userForms
自返回后将不起作用FormArray
,您必须指定索引才能获得colors
属于特定用户的控制权。
所以它可能看起来像:
getColors(index) {
return this.userForms.get([index, 'colors']) as FormArray;
}
在html中:
<div *ngFor="let color of getColors(i).controls;...>
colors
使用数组时还需要牢记:
addColor(index: number) {
const colorGroup = this.fb.group({
color: []
})
this.getColors(index).push(colorGroup);
^^^^^^^^^^^^
use the them method to get correct FormArray
}
deleteColor(userIndex: number, colorIndex: number) {
this.getColors(userIndex).removeAt(colorIndex);
}
另请参阅Ng-run 示例
推荐阅读
- r - 如何仅更改刻度之间的距离?
- javascript - 从网站上的 JavaScript 脚本调用 Java SpringBoot 服务器方法
- javascript - 在获取 url 之前获取用户位置并将其传递给 Async/Await 函数
- webassembly - 如何有效地将wasm(WebAssembly)直接嵌入到html文件中?类型化数组
- java - 使用 OkHttp 4.5.0 随机获取 java.io.InterruptedIOException
- database - MongoDB慢查询仅针对特定集合
- visual-studio - 触发后更改颜色或在 Unity 中穿过立方体
- bash - 为什么从方法中调用方法会避免在新行中打印?
- java - 我在创建 Spring Boot 项目 pom.xml 时首先遇到错误
- angular - 获取 mat-checkbox 的选中值 - Angular Material