Question

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

我的应用程序的先前版本在html5中使用了javascript。选择图形输入后，代码将使用javascript将值设置为DOM。

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

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

我花了很多时间搜索，并且没有清晰的Renderer示例可以支持我的使用方式。 Renderer的大多数示例都用于指令。

设置无线电，使用反应性表单或图形元素从Angular中为DOM选择输入值的最佳方法是什么？

角反应形式，输入元素会自动在DOM上设置值吗？

谢谢。

Answer 1

反应形式的确为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>

设置字段cargo_shape的值时，单选按钮的值将在DOM中相应地更改。

角电抗形式输入值如何影响dom？

1 个答案: