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">
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.