我将如何设置默认单选按钮已选中并知道以反应形式从单选组中选中了哪个单选按钮？

Question

我创建了一组单选按钮。我想设置一个默认的单选按钮 'checked'，每当动态单击其他单选按钮时，我如何捕获哪个单选按钮 button.so，我可以在打字稿的条件语句中相应地使用它。"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>

以上是我的 HTML 反应形式的部分技术人员：

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

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

Answer 1

使用您想默认选中的任何单选按钮的值初始化表单控件。无需在任何单选按钮

中添加默认 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

请在此处查看示例：https://stackblitz.com/edit/angular-kw8bhf

我将如何设置默认单选按钮已选中并知道以反应形式从单选组中选中了哪个单选按钮？

How will i set default radio button checked and know which radio button is checked from the radio-group in a reactive-form?

radio-group

radio-button

angular

angular-reactive-forms