在Angular Material中,如果你想要在同一个页面中使用多个具有相同名称/字段的mat-radio-group,你可以使用formGroupName来区分它们。
以下是一个示例代码,展示了如何解决这个问题:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-radio-group-example',
templateUrl: './radio-group-example.component.html',
styleUrls: ['./radio-group-example.component.css']
})
export class RadioGroupExampleComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
group1: new FormControl(), // 第一个mat-radio-group的字段
group2: new FormControl() // 第二个mat-radio-group的字段
});
}
}
在上述代码中,我们创建了一个名为myForm
的FormGroup,并分别为每个mat-radio-group创建了一个FormControl,并将它们分别命名为group1
和group2
。这样就可以在模板中使用这些字段来区分不同的mat-radio-group。
然后,在模板中,你可以像下面这样使用这些字段:
在上述模板中,我们使用了formControlName
指令来绑定每个mat-radio-group到相应的FormControl。
这样,你就可以在同一个页面上使用多个具有相同名称/字段的mat-radio-group,并且它们会分别与不同的FormControl绑定。
下一篇:Angular材料多选