在Angular 8的Reactive Forms中,要在不同的FormGroup中使用具有相同名称的单选按钮输入,可以使用FormArray。
下面是一个示例代码,其中包含两个FormGroup,每个FormGroup都有一个单选按钮输入,它们具有相同的名称:
在组件类中,我们首先导入所需的模块和类:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormArray } from '@angular/forms';
然后,在组件类中创建两个FormGroup,并使用FormBuilder创建FormArray:
export class MyComponent implements OnInit {
form: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.form = this.formBuilder.group({
options: this.formBuilder.array([
this.createOption(),
this.createOption()
])
});
}
createOption(): FormGroup {
return this.formBuilder.group({
name: '',
value: ''
});
}
get options(): FormArray {
return this.form.get('options') as FormArray;
}
}
在模板中,我们使用*ngFor指令循环遍历FormArray中的所有FormGroup,并为每个单选按钮输入绑定正确的FormControl:
现在,我们就可以在不同的FormGroup中使用具有相同名称的单选按钮输入。每个单选按钮输入都将与其所在的FormGroup进行绑定,并通过FormGroup的值属性进行访问。
希望这可以帮助到你!