Angular - list of radio button not working - forms

Question

I'm having problems using a list of radio buttons inside a form. Below my code.
view
<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>
controller
perito: FormGroup;
ngOnInit() {
this.perito = new FormGroup({
idPerito: new FormControl()
});
}
onSelect() {
console.log(this.perito.value);
}
The problem is that when I select one radio button:
all the other radio button get selected too
the form object is undefined
What is the correct way to manage a list of radio button? Thanks.
EDIT - this is how I populate my periti array:
this.peritiSrv.getPeriti()
.then(res => {
this.periti = res;
})
.catch();
Anyway, it cannot happen to have the same id for two periti objects, because they are primary keys.

Answer 1

Your form object is undefined probably because it was not instantiated by the time your component was created (constructed). Try to move the formGroup creation line to the body of the constructor for that component from the ngOnInit() hook,
controller
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);
}
See if the problem persists.