use formControlName with something like

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

What is missing in my initial post? There is no showcase.... the app where I face the problem is kinda complex and needs backend components to run and so on. think the question is so straight.... - a showcase shouldn't be needed I'd say. I tried ``but of course this didn't work.... `No value accessor for form control with path: 'rows -> 0 -> lastUpdated'` is the error. — Olli, Jan 17 '17 at 20:51
Well, it's totally up to you, if you want help, usually the best is to show us your relevant code. That usually attracts people to help when they can actually *see* the code, but you are no newbie so you probably know this. Good luck! :) — AT82, Jan 17 '17 at 21:17
I understand what you need - but the question is so simple.... "can a formControl elements value be displayed in anything other than an input element".... if I'd put up a show case you'll see how stupid simple this question is..... maybe I find time tomorrow to put up a showcase But either someone knows it of its sleeve or not... the code will not "enlight" anything ;) — Olli, Jan 17 '17 at 21:43

score 15 · Answer 1 · answered May 22 '17 at 08:16

15

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

answered May 22 '17 at 08:16

Mina W Alphonce

648
8
14

1

it worked for me. I agree its not the most pretty solution but it works. In my scenario I used something like: {{this.myModel.form.get("username").value}} – saomi Sep 09 '19 at 13:45
nice +1, but still watch for a better way. – KumailR Jan 10 '20 at 08:02

score 12 · Answer 2 · answered Jun 04 '17 at 10:27

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>

use formControlName with something like

Edit

2 Answers2

Linked