我从数据库接收一个对象,其中包含一些具有以下格式的元素:
info = [{
idcentro: "8227",
namecentro: "Centro Paris",
address: "C/ Paris, 127",
dias: [
{
dia: "0",
horafinal: "06:00",
horainicio: "17:00",
salas: [
{
id: 0,
nombre: "sala 1",
intervalos: [
["09:00", "12:30", "10"],
["13:00", "21:30", "20"]
]
}
]
},
{
dia: "1",
horafinal: "09:00",
horainicio: "16:30",
salas: [
{
id: 0,
nombre: "sala 1",
intervalos: [
["09:00", "12:30", "10"]
]
},
{
id: 1,
nombre: "sala 2",
intervalos: [
["09:00", "20:30", "20"]
]
}
]
},
{
dia: "2",
horafinal: "09:00",
horainicio: "20:30",
salas: [
{
id: 0,
nombre: "sala 1",
intervalos: [
["09:00", "12:30", "10"],
["12:45", "18:30", "15"]
]
},
{
id: 1,
nombre: "sala 2",
intervalos: [
["09:00", "20:30", "20"]
]
}
]
}
]
}];
为了处理这些“dias”数组并包含输入以修改每个值(以防用户需要),我手动创建了一个 FormGroup,其中包含每一天的 formControl(实际对象最多包含 8 天) .
this.openingHoursForm = new FormGroup({
day0OpeningTime: new FormControl(""),
day0ClosingTime: new FormControl(""),
day1OpeningTime: new FormControl(""),
day1ClosingTime: new FormControl(""),
day2OpeningTime: new FormControl(""),
day2ClosingTime: new FormControl(""),
day3OpeningTime: new FormControl(""),
day3ClosingTime: new FormControl(""),
day4OpeningTime: new FormControl(""),
day4ClosingTime: new FormControl(""),
day5OpeningTime: new FormControl(""),
day5ClosingTime: new FormControl(""),
day6OpeningTime: new FormControl(""),
day6ClosingTime: new FormControl(""),
day7OpeningTime: new FormControl(""),
day7ClosingTime: new FormControl(""),
day8OpeningTime: new FormControl(""),
day8ClosingTime: new FormControl("")
});
然后,在 HTML 中,我为每个 formControlName 创建两个输入:
<div class="dayOpeningHours" title="">
<div>Day 0</div>
<div class="opens">
<label for="">De:
<input class="form-control" type="time" formControlName="day0OpeningTime" name="day0OpeningTime">
</label>
</div>
<div class="closes">
<label for="">A:
<input class="form-control" formControlName="day0ClosingTime" name="day0ClosingTime">
</label>
</div>
</div>
正如您所看到的,这变得非常难以维护。我尝试通过循环“dias”数组的每个“dia”来动态创建标记(在 html 中)和 formControlNames(在 ts 中),但我没有取得任何成果。
有没有办法可以在同一个 formGroup 中生成 HTML 和这些表单控件的声明?我一直在阅读有关 FormArray 和 AbstractControl 的内容,但我无法真正理解如何将其应用到我的代码中。
有人可以帮助我或给我一些提示以找到正确的文档吗?
谢谢
最佳答案
更好的选择是使用 FormArray
来代替。您还可以从 @angular/forms
FormBuilder
见下文
constructor (private fb: FormBuilder) { }
diasForm = this.fb.group({
openingHours: this.fb.array([])
})
get openingHours (): FormArray {
return this.diasForm.get('openingHours') as FormArray;
}
下一个任务是创建表单
假设我们有 dias
作为数组
dias = [
{
dia: "0",
horafinal: "06:00",
horainicio: "17:00",
},
{
dia: "1",
horafinal: "06:00",
horainicio: "17:00",
},
...
]
为了简单起见,我删除了其他属性
在 ngOnInit
中,我们可以设置表单的值
ngOnInit() {
this.dias.forEach(dia => {
this.openingHours.push(
this.fb.group({
horafinal: [dia.horafinal, []],
horainicio: [dia.horainicio, []]
})
)
})
}
在 HTML 中
<form [formGroup]='diasForm'>
<div formArrayName='openingHours'>
<div *ngFor='let item of openingHours.controls; let i = index'
[formGroupName]='i'>
<input formControlName='horafinal' />
<input formControlName='horainicio' />
</div>
</div>
</form>
上面的内容应该与我们的 formGroup 的结构相匹配
diasForm( [formGroup] ) ---> openingHours(formArray) ---> i ( [formGroup] ) ---> horafinal(formControl)
这样您就可以拥有动态的天数
关于javascript - 如何在 FormGroup 内动态生成 FormControl?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64467079/