将 formControlName 与诸如 <span> 之类的内容一起使用. [英] use formControlName with something like <span>

问题描述

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

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

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

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

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

编辑

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

上次使用"字段 - 我想将其显示为纯文本"而没有输入标签

解决方案

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

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

我设法直接在 html 中使用丑陋的解决方法使其工作

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

• ctrl = 是 ngFor 内部的 AbstractControl 迭代器，通常是 *ngFor="let ctrl of theFormArray.controls; let ndx=index"

• lastUpdated = 是您要显示的字段

I have a dynamic form which shows multiple datasets I've got via REST. The user will edit this dataset and then later just submit it to get it sent back to the server.

The form is built dynamically with FormBuilder.array() and looped through via formArrayName + *ngFor in my template.

One property of each dataset is a "last updated" information I want to display along with the editable data in my form. Right now I use an <input> field with disabled attribute - but this looks kinda ugly.

When I used a model driven form i just had a <span>{{mf.lastUpdated}}</span> part for each dataset which just displayed the date nicely.

Now that I want to use reactive Forms, I can't set formControlName in a <span> Tag - so how am I supposed to display the information without any input possibility?

Edit

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

The "last Used" field - I want to display it as "text only" without an input-tag

解决方案

It themes an old question, but I'm facing the same problem

formControlName only works on input, select and textarea. anything that has "value" property.

I have managed to make it work with an ugly workaround directly in the html

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

• ctrl = is your AbstractControl iterator from inside the ngFor, typically *ngFor="let ctrl of theFormArray.controls; let ndx=index"

• lastUpdated = is the field you want to display

这篇关于将 formControlName 与诸如 <span> 之类的内容一起使用.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！