Name of input type radio with formControl

Question

Good night.

I created a Component for a standardized template and I’m having trouble adjusting the name of the radio input making only one selected and not all.

theme-thumbnail.component.ts

@Component({
  selector: 'tema-thumbnail',
  templateUrl: './tema-thumbnail.component.html'
})
export class TemaThumbnailComponent implements OnInit {

  @Input() tema: Tema
  @Input() parent: FormGroup
  @Input() fcName: string

  constructor() { }

  ngOnInit() {
  }

}

theme-thumbnail.component.html

<div class="col-xs-6 col-sm-4 col-md-2 col-lg-2" [formGroup]="parent">
    <label>
        <input type="radio" [formControlName]="fcName" [value]="tema.id" >
        <figure>
            <img src="{{tema.url}}" alt="{{tema.titulo}}">
            <figcaption>
                <h4>{{tema.titulo}}</h4>
                <p>{{tema.descricao}}</p>
            </figcaption>
        </figure>
    </label>
</div>

And I’m using it like this:

event-information.component.ts

export class EventoInformacoesComponent extends Form implements OnInit {

    temas: Tema[]
    ...
    ...

    ngOnInit() {
      this.temas = this.eventoService.obterTemasDisponiveis()
    }

    ...
    ...

    this.formBuilder.group({
      ...
      'codigo_template': this.formBuilder.control('',Validators.required])
    })

    ...
    ...
}

event-information.component.html

<form role="form" [formGroup]="form">
...
...

    <div class="row radio">
      <tema-thumbnail *ngFor="let tema of temas" [tema]="tema" [parent]="form" [fcName]="'codigo_template'"></tema-thumbnail>
    </div>

...
...
</form>

However I am not able to make the radio input select only one option. This being possible to select several options.

Generated input is without "name". Contains only "ng-reflect-name"

<input type="radio" ng-reflect-form-control-name="codigo_template" ng-reflect-value="1" ng-reflect-name="codigo_template" class="ng-dirty ng-valid ng-touched">

Answer 1

Look, the radio button needs to have a name equal in all radio Buttons so that only one of them is selectable. Then, try to use the nameinstead of ng-reflect-form-control-name.

Example:

<input (change)="onSelectMovimentacao(1)" class="form-check-inline ml-2" type="radio" name="movimentacao"> Entrada
<input (change)="onSelectMovimentacao(2)" class="form-check-inline ml-2" type="radio" name="movimentacao" [checked]="true"> Saída

I could not get the value of the radio button selected by formControlName, in the example above, as it is only an option, I used the (change) to send the value. To get the value, I used the document in the component, when I use a ngFor.

const auxPerm:any = document.querySelectorAll('input[class="form-check-inline ml-2 perm"]:checked');

Anything, explain more in the comments.