CODEWITHSUNDEEP
angularangular2-forms
Olli
Olli

Reputation: 729

use formControlName with something like <span>

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

Upvotes: 16

Views: 17438

Answers (2)

Francesco
Francesco

Reputation: 10830

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>

enter image description here

Upvotes: 13

Mina W Alphonce
Mina W Alphonce

Reputation: 649

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

Upvotes: 15

Related Questions