如何设置默认单选按钮并知道以无效形式从无线电组中选中哪个单选按钮？

Question

我创建了一组无线电按钮。我想设置一个默认的单选按钮'已选中'，每当动态点击其他单选按钮时，我如何捕获哪个单选按钮。因此，我可以在我的打字稿中的条件语句中相应地使用。“CHECKED”标签不起作用

<form [formGroup]="Form">
  <div class="bx--row">
    <fieldset class="bx--fieldset">
      <legend class="bx--label">HEYHELLOWORLD</legend>
      <div class="bx--form-item">
        <div class="bx--radio-button-group ">
          <input id="radio-button-1" class="bx--radio-button" type="radio" formControlName="selectedOption"
            value="0" checked>
          <label for="radio-button-1" class="bx--radio-button__label">
            <span class="bx--radio-button__appearance"></span>
            HEY<br>
          </label>
          <input id="radio-button-2" class="bx--radio-button" type="radio" formControlName="selectedOption"
            value="1" tabindex="0">
          <label for="radio-button-2" class="bx--radio-button__label">
            <span class="bx--radio-button__appearance"></span>
            HELLO<br>
          </label>
          <input id="radio-button-3" class="bx--radio-button" type="radio" formControlName="selectedOption"
            value="2" tabindex="0">
          <label for="radio-button-3" class="bx--radio-button__label">
            <span class="bx--radio-button__appearance"></span>
            WORLD
          </label>
        </div>
      </div>
    </fieldset>
  </div>
</form>

以上是我的反应形式TS的HTML部分：

    heyForm() {
      this.Form = this.formBuilder.group({
          selectedOption: ["", Validators.required],
      });
    }

我如何获得在TS文件中选择的值，以便我可以使用在条件语句中单击哪个单选按钮？

Answer 1

使用要作为默认值选中的任何单选按钮的值初始化表单控件。无需在任何单选按钮中添加默认的qazxsw poi属性

checked

如果要访问单击哪个单选按钮，可以通过以下方式执行：

this.form = this._fb.group({
    selectedOption: ["1", Validators.required], // this will make the second radio button checked as default.
});

有一个函数通过单选按钮在this.form.get('selectedOption').value 事件上获取上述值。

例如：

(change)

在这里查看示例：

<input (change)="foo()" id="radio-button-1" class="bx--radio-button" type="radio" formControlName="selectedOption" value="0">
// inside the method foo() check for the currently selected radio button