在Angular 8中,可以使用循环来动态构建表单。以下是一个示例解决方案,包含使用循环构建表单的代码示例。
首先,需要导入相关的Angular模块和表单相关的类。
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
然后,在组件类中创建一个表单组,并使用表单构建器创建表单。
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
items: this.fb.array([])
});
}
get items(): FormArray {
return this.myForm.get('items') as FormArray;
}
addItem(): void {
this.items.push(this.createItem());
}
createItem(): FormGroup {
return this.fb.group({
name: '',
quantity: ''
});
}
}
在HTML模板中,可以使用*ngFor
指令来循环渲染表单项。
在上述示例中,addItem()
方法用于向表单中添加新的表单项,并且createItem()
方法用于创建新的表单项。
通过以上示例,你可以在Angular 8中使用循环动态构建表单。