use formControlName with something like

问题

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

回答1:

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

回答2:

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>

来源：https://stackoverflow.com/questions/41705987/use-formcontrolname-with-something-like-span

标签

angular

angular2-forms

use formControlName with something like <span>

问题

Edit

回答1:

回答2: