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

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

0 голосов
/ 09 января 2019

Я создаю угловое (реактивные формы) приложение-мастер 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?

Спасибо.

1 Ответ

0 голосов
/ 09 января 2019

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

...