use formControlName with something like <span>

Question

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

Answer 1

A possible solution without the need of workaround is to use the attribute readonly for the inputs and then style the target field as desired (inline style below just for sake of the example).

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