将 formControlName 与 之类的东西一起使用答案

【问题标题】：use formControlName with something like 将 formControlName 与 之类的东西一起使用
【发布时间】：2017-06-02 00:55:42
【问题描述】：

我有一个动态表单，它显示了我通过 REST 获得的多个数据集。用户将编辑此数据集，然后将其提交以将其发送回服务器。

表单是使用FormBuilder.array() 动态构建的，并在我的模板中通过formArrayName + *ngFor 循环。

每个数据集的一个属性是我想要显示的“最后更新”信息以及表单中的可编辑数据。现在我使用带有disabled 属性的<input> 字段 - 但这看起来有点难看。

当我使用模型驱动表单时，每个数据集都有一个 {{mf.lastUpdated}} 部分，可以很好地显示日期。

现在我想使用响应式表单，我无法在  标签中设置 formControlName - 那么我应该如何在没有任何输入可能性的情况下显示信息？

编辑

“最后使用”字段 - 我想将其显示为“纯文本”而不带输入标签

【问题讨论】：

我最初的帖子中缺少什么？没有展示......我面临问题的应用程序有点复杂，需要后端组件才能运行等等。认为这个问题很直接...... - 我会说不需要展示。我试过但当然这不起作用....No value accessor for form control with path: 'rows -> 0 -> lastUpdated'是错误。
好吧，这完全取决于您，如果您需要帮助，通常最好是向我们展示您的相关代码。当人们真正看到代码时，这通常会吸引人们提供帮助，但你不是新手，所以你可能知道这一点。祝你好运！ :)
我了解您的需求 - 但问题是如此简单......“可以在输入元素以外的任何地方显示 formControl 元素值”......如果我愿意一个展示案例你会看到这个问题是多么愚蠢简单......也许我明天有时间来展示一个展示但是要么有人知道它的袖子......代码不会“启发”任何东西; )
我添加了一个 plunker....

【解决方案1】：

它的主题是一个老问题，但我面临同样的问题

formControlName 仅适用于输入、选择和文本区域。任何具有“价值”属性的东西。

我已经设法让它直接在 html 中使用一个丑陋的解决方法

 {{ctrl.get("lastUpdated").value}}

ctrl = 是来自 ngFor 内部的 AbstractControl 迭代器，通常是 *ngFor="let ctrl of theFormArray.controls; let ndx=index"
lastUpdated = 是您要显示的字段

【讨论】：

它对我有用。我同意它不是最漂亮的解决方案，但它有效。在我的场景中，我使用了类似的东西：{{this.myModel.form.get("username").value}}
不错的 +1，但仍需寻找更好的方法。

【解决方案2】：

不需要变通方法的可能解决方案是使用属性readonly 作为输入，然后根据需要设置目标字段的样式（下面的内联样式只是为了示例）。

 <div>
     <label>last used</label>
     <input type="text" formControlName="_lastUsed" readonly style="border:0">
</div>

【讨论】：