模型更改时如何将值保持在禁用的输入控制中？

Question

我有一个JSON对象，通过它我创建一个表单，该表单具有每个值的一个禁用控件和一个启用输入控件。禁用输入仅供用户参考，而他可以更改活动输入控件中的值。使用同一模型时，我需要在禁用的Input中保持固定的值。任何帮助将不胜感激。

Answer 1

如果您使用的是模板驱动的表单，则可以对禁用的元素使用一次性绑定，这样它们就不会更新。

对于反应式表单，这将更加容易，因为表单模型和数据模型已经分开。

这是一个示例（模板驱动的表单）：

通常绑定（可编辑）的物品：

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

一次性绑定（不可编辑）项目：

      <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->一次性绑定（仅绑定初始值，不会更新）