How does angular reactive form input values affect dom?

Question

I'm building an angular(reactive forms) 6/7 UI wizard app. This app will be used on an ecommerce platform (ex. Shopify, WordPress) to replace the platform's default product page. The app uses angular material radio inputs to record choices and set values to the DOM.

The previous version of my app used javascript with html5. When graphical inputs are selected, the code sets the value to the DOM using javascript.

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

I'm sure that I can use the same logic to set the value on the DOM using the same logic, however angular does not support writing to the DOM directly, and prefers using Renderer2 for DOM interations.

I've spent time searching and there are no clear Renderer examples that support how I want to use it. Most examples of Renderer are for directive use.

What is the best method to set radio, select input values to the DOM from Angular using reactive forms or graphic elements?

Does angular reactive form, input elements, automatically set value on the DOM?

Thanks.

score 0 · Answer 1 · answered Jan 09 '19 at 17:46

reactive forms do set values to the DOM.

eg.

<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>

On setting the value of the field cargo_shape, the value of the radio button changes accordingly in the DOM.

How does angular reactive form input values affect dom?

1 Answers1