Как угловые значения реактивной формы влияют на дом?

Question

Я создаю угловое (реактивные формы) приложение-мастер 6/7. Это приложение будет использоваться на платформе электронной коммерции (например, Shopify, WordPress), чтобы заменить страницу продукта платформы по умолчанию. Приложение использует радиовходы из углового материала для записи выбора и установки значений для DOM.

Предыдущая версия моего приложения использовала JavaScript с html5. Когда графические входы выбраны, код устанавливает значение DOM с использованием JavaScript.

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

Я уверен, что могу использовать ту же логику, чтобы установить значение в DOM, используя ту же логику, однако angular не поддерживает запись в DOM напрямую и предпочитает использовать Renderer2 для взаимодействий DOM.

Я потратил время на поиск, и нет четких примеров Renderer, которые бы поддерживали то, как я хочу его использовать. Большинство примеров Renderer предназначены для использования по директивам.

Как лучше всего настроить радио, выбрать входные значения для DOM из Angular, используя реактивные формы или графические элементы?

Имеет ли угловая реактивная форма элементы ввода, автоматически устанавливающие значение на 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.