时间戳

首页 > 解决方案 > 如何使用 Angular Reactive Forms 动态检查单选按钮？

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

问题描述

快速提问。我正在从数据库中获取数据，并且我想使用 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>

标签： angularforms

解决方案

您可以创建一个布尔变量并将其设置为 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并更改它的值。

推荐阅读