以编程方式设置用作单选按钮的按钮的值

Question

我正在尝试设置一个通过代码用作单选按钮的按钮的值。我正在使用反应形式。

我尝试在 ngInit 上设置按钮的初始值

ngOnInit() {
this.form = this.fb.group({
  radioOption: ['optionA'], // Set the initial value to 'optionA'
  selectedFood: ['Peach'], // Set the initial value to 'Peach'
});
this.form.patchValue({
  selectedFood: '',
});}

并通过单击“设置”按钮

setPeachValue() {
console.log('setting value');
this.form.patchValue({
  selectedFood: 'Peach',
  radioOption: 'optionA',
});}

两种方法产生相同的结果，我无法设置按钮“选项 A”和“选项 B”的值。

StackBlitz 供参考。

Answer 1

radioOption

控制的反应形式设定值工作正常。但问题来自于它无法将“活动”类添加到按钮切换中。

您需要根据值通过

[ngClass]

将“active”类添加到按钮切换。

请注意，不建议使用

[(ngModel)]

，因为您使用的是响应式表单，它是多余的，可能会导致值出现意外行为。

<label
  class="btn btn-secondary"
  tabindex="0"
  [ngClass]="{ active: form.get('radioOption').value === 'optionA' }"
>
  <input
    type="radio"
    name="options"
    id="optionA"
    [formControl]="form.get('radioOption')"
    autocomplete="off"
    [value]="'optionA'"
  />
  Option A
</label>
<label
  class="btn btn-secondary"
  tabindex="0"
  [ngClass]="{ active: form.get('radioOption').value === 'optionB' }"
>
  <input
    type="radio"
    name="options"
    id="optionB"
    [formControl]="form.get('radioOption')"
    autocomplete="off"
    [value]="'optionB'"
  />
  Option B
</label>

演示@StackBlitz