Non-string values from form controls in Angular2

Question

In Angular2, is there a clean way to handle a form control's value as something else than a string, for example have a <select> with options (bool) true and (bool) false?

Currently I'm using solutions that don't feel very elegant:

<select (change)="model.published = !!$event.target.value">
    <option value="">No</option>
    <option value="1">Yes</option>
</select>

<select (change)="model.type = $event.target.value * 1">
    <option value="1">My value is (int) 1</option>
    <option value="2">My value is (int) 2</option>
</select>

I'm using <select>s in my example, but I'm interested in other form controls as well.

This question was suggested as a duplicate, but I'm don't think it is one since I'm not

interested only in selects
trying to generate options dynamically

Possible duplicate of How to use select/option/NgFor on an array of objects in Angular2 — Günter Zöchbauer
– Günter Zöchbauer, Commented Jan 15, 2016 at 9:25
Good question, I have exactly the same problem.. Your solution is the best I have found so far, but I agree that it isn't very elegant.. Did you find a solution? — Maarten Kieft
– Maarten Kieft, Commented May 16, 2016 at 12:40

Günter Zöchbauer · Accepted Answer · 2016-01-15 09:24:30Z

1

This is a known limitation in the current Angular version https://github.com/angular/angular/issues/2551

answered Jan 15, 2016 at 9:24

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Langley · Accepted Answer · 2016-01-15 09:26:29Z

1

Yea just add [(ngModel)]="model.published" to the select and it'll set the value property of the <option> selected, if you add an object in the <option> like this: <option value="{{object}}"> you'll set an object, it doesn't have to be a string.

answered Jan 15, 2016 at 9:26

Langley

5,3442 gold badges29 silver badges42 bronze badges

3 Comments

Schlaus Over a year ago

But since I don't have the possible values in an object or array, how would this work?

Langley Over a year ago

<option value="{{false}}">No</option> <option value="{{true}}">Yes</option>, but for booleans I dont think you have to use {{}} they should convert if you bind the select to a boolean property by just using: <option value="false">No</option> <option value="true">Yes</option>

Schlaus Over a year ago

That does not seem to work. The values still end up as strings into the model.

Collectives™ on Stack Overflow

Non-string values from form controls in Angular2

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related