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>

以上是我的带有响应形式的HTML部分 TS：

    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

如何设置默认单选按钮处于选中状态，以及如何从单选按钮组中选择以反应形式选中哪个单选按钮？

1 个答案: