如何使用 Angular Reactive Forms 动态检查单选按钮？答案

【问题标题】：How to dynamically check a radio button with Angular Reactive Forms?如何使用 Angular Reactive Forms 动态检查单选按钮？
【发布时间】：2020-12-26 17:16:36
【问题描述】：

快速提问。我正在从数据库中获取数据，并且我想使用 Reactive Forms 向用户显示数据（用户不会更改任何内容，这只是选择显示数据的 UI）我有一些布尔值：0-否，1-是。我想在相应的单选按钮中显示这些值（1 个按钮表示是，1 个按钮表示否，将检查正确的按钮）如何将“checked”属性动态添加到单选按钮组？下面添加的代码。（这显然行不通）谢谢！

   <div class="d-flex">
    <label
      ><input
        type="radio"
        formControlName="fcw"
        class="ml-2"
        value="1"
        [checked]="vehicleData.fcw == 1 ? true : false"
      />כן
    </label>

    <label class="mr-5"
      ><input
        type="radio"
        formControlName="fcw"
        value="0"
        class="ml-2"
        [checked]="vehicleData?.fcw == 0 ? true : false"
      />לא</label
    >
  </div>

【问题讨论】：

NOT use [checked] if you have a FormControl, is the value of formControl who表示输入值
@Or Shoham 对我有用的方法是使用 [(ngModel)] = "vehicleData.fcw"。
@Toby 谢谢。我尝试过，但出现以下错误：ngModel 不能用于使用父 formGroup 指令注册表单控件。尝试改用 formGroup 的合作伙伴指令“formControlName”。我想这意味着我们不能将 ngModel 与 formGroup 和 Reactive 表单一起使用
@OrShoham 好吧，你也有一个 FormGroup。我认为 ngModel 已被弃用，但有时很难跟上 Angular 的步伐。似乎当前使用 FormGroup 在 ReactiveForms 中设置表单值的方法是从组件中对表单组本身使用 setValue 或 patchValue ，而不是绑定到 UI 中的模型。 stackoverflow.com/questions/51342775/… 那对你有用吗？
好的，所以基本上解决方案是对两个单选按钮使用 [value] ="1" 和 [value]="0"，效果很好..

标签： angular forms

【解决方案1】：

你可以使用 Renderer2 setAttribute /setProperty 方法并在单选按钮上添加一个@viewchildren 装饰器并获取单选按钮

【讨论】：

【解决方案2】：

您可以创建一个布尔变量并将其设置为 true 或 false，具体取决于您是否要选中或取消选中按钮。在代码中您可以这样做：

   <div class="d-flex">
<label
  ><input
    type="radio"
    formControlName="fcw"
    class="ml-2"
    value="1"
    [checked]="{{yourVariable}}"
  />כן
</label>

<label class="mr-5"
  ><input
    type="radio"
    formControlName="fcw"
    value="0"
    class="ml-2"
    [checked]="{{yourVariable}}"
  />לא</label
>

通过在组件中执行此操作，您应该有一个变量 yourVariable 并更改它的值。

【讨论】：

我想过类似的事情，但这有什么不同呢？ 0 和 1 本身被认为是布尔值，不是吗？此外，在我将表单切换为响应式表单之前，我在上面发布的逻辑工作得很好......
如果 formControl 的值为“0”，则检查值为 0 的输入 type="radio"。不要在 formControl 中使用 [checked]，Angular 会为您“检查”