Name of input type radio with formControl

Good Night.

I have created a component for a standardized template and I am having difficulty adjusting the name of the input radio causing only one to be 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 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 get input radio to select only one option. This being possible to select several options.

The generated input is without the "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">
Author: Pickles Dog, 2019-07-15

1 answers

Look, the radio button needs to have an equal name on all radio buttons so that only one of them is selectable. So try using name instead 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 couldn't get the value of the radio button selected by formControlName, in the example above, as it is just a choice option, I used the (change) to send the value. To get the value, I used the document in the component, for 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.

 0
Author: Edward Ramos, 2019-07-15 14:49:42