首先,在组件的ts文件中,我们需要引入FormGroup、FormBuilder和FormControl:
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
然后,我们可以在组件的构造函数中使用FormBuilder创建我们的表单:
form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
options: this.fb.array([])
});
}
注意,我们创建了一个FormGroup并将其命名为“form”,它有一个名为“options”的FormControl数组。
接下来,我们可以写代码动态添加单选按钮到“options”数组中:
addOption() {
const option = new FormControl(false);
this.form.controls.options.push(option);
}
最后,在HTML模板中,我们可以使用*ngFor循环来显示所有选项并将其绑定到单选按钮:
注意,我们将表单控件绑定到单选按钮的名称是“i”,其中“i”是*ngFor提供的一个当前索引变量。
完整的示例代码如下所示:
import { Component } from '@angular/core';
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
template: `
`
})
export