Как сохранить значения в отключенном элементе управления вводом при изменении модели?

Question

У меня есть объект JSON, с помощью которого я создаю форму, имеющую один отключенный элемент управления и один включенный элемент управления вводом для каждого значения. Отключенные входы предназначены для справки для пользователя, в то время как он может изменять значения в активном элементе управления вводом.Мне нужно сохранить значения фиксированными в отключенном входе, используя ту же модель.Любая помощь будет оценена.

Answer 1

Если вы используете формы на основе шаблонов, вы можете использовать одноразовую привязку для отключенных элементов, чтобы они не обновлялись.

Это будет еще проще с реактивными формами, такими как модель формы и модель данныхуже разделены.

Вот пример (управляемые шаблоном формы):

Нормально связанный (редактируемый) элемент:

      <input class="form-control"
             id="productNameId"
             type="text"
             placeholder="Name (required)"
             required
             minlength="3"
             [(ngModel)]=product.productName
             name="productName" />

Одноразовое связывание (не редактируемое)) item:

      <input class="form-control"
             id="productNameId"
             type="text"
             placeholder="Name (required)"
             required
             minlength="3"
             ngModel=product.productName   /* <- the difference is here */
             name="productName" />

Вот блик стека: https://stackblitz.com/edit/angular-hnyy5d

[(ngModel)] -> двусторонняя привязка

[ngModel] -> односторонняя привязка

ngModel -> однократное связывание (связывает только начальное значение и не обновляется)