Angular: Как присвоить значение выбранной радиокнопки переменной в компоненте .ts?

Question

В моей форме у меня есть 2 переключателя. В зависимости от того, какая радио-кнопка выбрана, я назначу это значение как часть объекта запроса, который будет передан в пост-HTTP-запрос.

Я создал переменную selectedRadio: string, и мне нужно, чтобы получить значениевыбор радиовхода при запуске метода с именем createRequest() при нажатии кнопки. Когда нажата эта кнопка, мне нужно получить значение radio button в файле .html` и передать его в качестве значения свойства в объекте запроса. Но я не смог этого сделать.

это мой файл .html:

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

, и это метод, который создает объект запроса и заполняет его значениями:

  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;
  }

Мне нужно вставить в этот метод следующее: this.request.selecteRadioValue и назначить его выбранной радиокнопке, но я не смог этого сделать.

Можете ли вы помочь мне с этим?

Answer 1

В вашем app.module убедитесь, что вы импортируете FormsModule:

import {FormsModule} из "@ angular / forms";

... итакже импортирует

импорт: [BrowserModule, FormsModule]

и в ваш компонент

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>

Answer 2

Мне удалось ее решить.

.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;
  }