以下是一个示例代码,展示如何在Angular中动态创建响应式嵌套表单数组,并使用单选按钮进行选择:
在组件的HTML文件中,可以使用ngFor循环来动态创建表单控件和单选按钮:
在组件的TypeScript文件中,需要使用FormBuilder来创建响应式表单和控件:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
items: this.fb.array([])
});
// 添加初始项
this.addItem();
}
get items(): FormArray {
return this.myForm.get('items') as FormArray;
}
addItem() {
const newItem = this.fb.group({
name: '',
selectedItem: ''
});
this.items.push(newItem);
}
}
在上述代码中,我们使用FormBuilder创建了一个包含items
表单数组的myForm
表单组。然后,我们在addItem
方法中,动态创建了一个新的表单项,并将其添加到items
数组中。
最后,在HTML模板中,我们使用ngFor循环遍历items
数组,并使用formGroupName和formControlName来绑定表单控件。
请注意,这只是一个简单的示例,你可以根据你的需求进行更改和扩展。