Angular - 单选按钮列表不起作用

Question

我在使用表单中的单选按钮列表时遇到问题。在我的代码下方。
查看

<form novalidate (ngSubmit)="onSubmit()" [formGroup]="perito">
    <div class="form-group row">
        <table class="table">
            <thead></thead>
            <tbody>
                <tr *ngFor="let p of periti">
                    <td>{{p.nome}} {{p.cognome}}</td>
                    <td>{{p.indirizzo}} {{p.civico}} - {{p.cap}} 
                        {{p.comune}}
                    </td>
                    <td><input formControlName="idPerito" type="radio" [value]="p.id" (change)="onSelect(p.id)"></td>
                </tr>
            </tbody>
        </table>
    </div>
</form>

控制器

perito: FormGroup;
ngOnInit() {
    this.perito = new FormGroup({
        idPerito: new FormControl()
    });
}
onSelect() {
    console.log(this.perito.value);
}

问题是当我选择一个单选按钮时：

1. 所有其他单选按钮也被选中
2. 表单对象未定义

管理单选按钮列表的正确方法是什么？谢谢。

编辑 - 这就是我填充 periti 数组的方式：

this.peritiSrv.getPeriti()
    .then(res => {
        this.periti = res;
     })
     .catch();

无论如何，两个periti 对象不可能有相同的id，因为它们是主键。

Answer 1

您的表单对象是undefined 可能是因为在创建组件时它尚未实例化（constructed）。尝试将 formGroup 创建行从 ngOnInit() 钩子移动到该组件的 constructor 主体，

控制器

perito: FormGroup;
constructor() {
    this.perito = new FormGroup({
        idPerito: new FormControl('')
    }); // empty string passed in as the initial value of the FormControl instead of no argument
}
// no ngOnInit() implementation
onSelect() {
    console.log(this.perito.value);
}

查看问题是否仍然存在。