0

我正在构建一个角度（反应形式）6/7 UI 向导应用程序。此应用将用于电子商务平台（例如 Shopify、WordPress），以替换平台的默认产品页面。该应用程序使用角度材料无线电输入来记录选择并为 DOM 设置值。

我的应用程序的早期版本使用带有 html5 的 javascript。选择图形输入时，代码将使用JavaScript设置值。

document.getElementById(id).value = "265" //javascript code
Renderer2.setAttribute(divId,'value','newValue') //Angular

我确信我可以使用相同的逻辑使用相同的逻辑在 DOM 上设置值，但是 angular 不支持直接写入 DOM，并且更喜欢使用 Renderer2 进行 DOM 交互。

我已经花时间搜索并且没有明确的渲染器示例支持我想要如何使用它。渲染器的大多数示例都是用于指令使用。

使用反应形式或图形元素设置无线电、从 Angular 选择 DOM 的输入值的最佳方法是什么？

角度反应形式、输入元素是否会自动在 DOM 上设置值？

谢谢。

4

1 回答 1

0

反应式表单确实为 DOM 设置了值。

例如。

<div class="col-md-12 cargo-shape">
  <span>
    <div class="radio-btn image-radio text-uppercase">
      <label>
        <input formControlName="cargo_shape" type="radio" [value]="cargoShapes.package">
        <span></span>
        <!-- radio button styling -->
        <div class="label-text">{{ 'PACKAGE' | translate }}</div>
      </label>
    </div>
  </span>
  <span class="mx-4">
    <div class="radio-btn image-radio text-uppercase">
      <label>
        <input formControlName="cargo_shape" type="radio" [value]="cargoShapes.container">
        <span> </span>
        <!-- radio button styling -->
        <div class="label-text"> {{ 'CONTAINER' | translate }}</div>
      </label>
    </div>
  </span>
</div>

在设置 fieldcargo_shape的值时，单选按钮的值会在 DOM 中相应更改。

于 2019-01-09T17:46:44.683 回答