将formControlName与<span>

时间：2017-01-17 20:06:24

标签： angular angular2-forms

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

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

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

当我使用模型驱动表单时，我只为每个数据集都有一个<span>{{mf.lastUpdated}}</span>部分，它只是很好地显示了日期。

现在我想使用反应式表单，我无法在formControlName标记中设置<span> - 那么我应该如何在没有任何输入的情况下显示信息？

修改

Plunker：http://plnkr.co/edit/JZIjXH9CagJNHLxK64fG?p=preview

“上次使用”字段 - 我想将其显示为“仅文本”而没有输入标记

2 个答案:

答案 0 :(得分：5)

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

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

enter image description here

答案 1 :(得分：4)

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

formControlName仅适用于input，select和textarea。任何有＆＃34;价值＆＃34;属性。

我已设法直接在html

中使用丑陋的解决方法 
{{1}}

  • ctrl =是来自ngFor内部的AbstractControl迭代器，通常是* ngFor =＆＃34;让ctrl of theFormArray.controls;让ndx = index＆＃34;

  • lastUpdated =是您要显示的字段

相关问题
最新问题