Angular: How to assign the value of the selected radio button to a variable in the .ts component?

Question

In my form, I have 2 radio buttons. Depending on what radio button is selected, I will assign that value as part of a request object to be passed to a post HTTP request.

I created a variable selectedRadio: string and I need it to get the value of the select radio input when a method named createRequest() is fired when a button is clicked. When this button is clicked I need to get the value of the radio button in the.html`file and pass it as the value of the property in the request object. But I haven't been able to accomplish it.

this is my.html file:

  <div class="col-sm-5 ph-0">
          <div class="col-sm-3 pr-0">
            <div class="radio c-radio">
              <label class="text-bold fs-custom-11">
                <input type="radio" name="electronicoSi" value="E" 
                checked /><span class="fa fa-circle"></span>Si
              </label>
            </div>
          </div>
          <div class="col-sm-3 ph-0">
            <div class="radio c-radio">
              <label class="text-bold fs-custom-11">
                <input type="radio" name="electronicoNo" value="M"
                 /><span class="fa fa-circle"></span>No
                </label>
            </div>
          </div>
        </div>

and this is the method that creates the request object and populates it with values:

  createRequest() {
    this.request.nnumfoliodesde = this.forma.controls.folioDesde.value;
      this.request.nnumfoliohasta = this.forma.controls.folioHasta.value;
      this.request.nrutoperador = Number(this.user.nrutoperador);
    this.request.scodtipodocumento = this.forma.controls.tipoFactura;
      this.request.sfechadesde = this.forma.controls.fechaDesde.value;
      this.request.sfechahasta = this.forma.controls.fechaHasta.value;
  }

I need to insert in that method the following: this.request.selecteRadioValue and assign it to the selected radio button but I haven't been able to do do it.

Can you help me with this?

Answer 1

I managed to solve it.

.html:

<input type="radio" formControlName="elecBtn"  value="E" checked />
<input type="radio" formControlName="elecBtn"  value="M" />

.ts:

  constructor(
    private modalService: BsModalService,
    public loader: NgxSpinnerService,
    private utilService: UtilService,
    private clienteService: ClientesService,
    private authService: AuthService
  ) {
    this.forma = new FormGroup({
      fechaDesde: new FormControl(''),
      fechaHasta: new FormControl(''),
      folioDesde: new FormControl(''),
      folioHasta: new FormControl(''),
      tipoFactura: new FormControl(''),
      elecBtn: new FormControl('')
    })
  }

and in the method that creates the `request` `object`:

  buscaDocumentosTimbrados() {
    this.requestDos.nnumfoliodesde = this.forma.controls.folioDesde.value;
    this.requestDos.nnumfoliohasta = this.forma.controls.folioHasta.value;
    this.requestDos.nrutoperador = Number(this.user.nrutoperador);
    this.requestDos.scodtipodocumento = this.forma.controls.tipoFactura;
    this.requestDos.sfechadesde = this.forma.controls.fechaDesde.value;
    this.requestDos.sfechahasta = this.forma.controls.fechaHasta.value;
    this.requestDos.sindelectronico = this.forma.controls.elecBtn.value;
  }

Answer 2

In your app.module, ensure that you import the FormsModule:

import { FormsModule } from "@angular/forms";

... and also the imports

imports: [BrowserModule, FormsModule]

and in your component

 import { Component, OnInit } from "@angular/core"; @Component({ selector: "app-test", templateUrl: "./test.component.html", styleUrls: ["./test.component.css"] }) export class TestComponent implements OnInit { constructor() {} model: any; ngOnInit() {} getvalueOption() { console.log(this.model); } }

 <div class="col-sm-5 ph-0"> <div class="col-sm-3 pr-0"> <div class="radio c-radio"> <label class="text-bold fs-custom-11"> <input type="radio" name="electronico" value="E" checked [(ngModel)]="model" /><span class="fa fa-circle"></span>Si </label> </div> </div> <div class="col-sm-3 ph-0"> <div class="radio c-radio"> <label class="text-bold fs-custom-11"> <input type="radio" name="electronico" value="M" [(ngModel)]="model" /><span class="fa fa-circle"></span>No </label> </div> </div> </div> <button type="submit" (click)="getvalueOption()">send</button>