下面是一个示例代码,演示了如何在Angular中使用*ngFor和FormArray来创建单选按钮的表单。
在组件的HTML模板中,我们首先创建一个FormArray,并使用*ngFor循环遍历它的控件。每个控件都是一个单选按钮,通过FormControlName指令与FormArray中的表单控件关联。我们还为每个单选按钮提供一个唯一的id属性,并使用[checked]属性来确定哪个单选按钮被选中。
在组件类中,我们创建一个名为options
的FormArray,并将其添加到名为myForm
的表单组中。我们还定义一个selectedOption
变量,用于跟踪选中的选项。
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } 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;
options: FormArray;
selectedOption: number;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
options: this.fb.array([
this.fb.control('Option 1'),
this.fb.control('Option 2'),
this.fb.control('Option 3')
])
});
}
}
在这个例子中,我们在ngOnInit方法中初始化表单,并默认选中第一个选项。你可以根据需要更改选中的选项。
这样,当用户选择不同的单选按钮时,选中的选项将通过selectedOption变量进行跟踪。你可以在组件类中使用this.selectedOption
来访问选中的选项。
希望这个示例对你有所帮助!