Angular2: Parse input/select string value into strong typed value

Question

I'm searching for over a day now to get the right answer, but I'm still a bit clueless. The question is really simple: I have a model with a property which is a boolean. I map that property to a select, which allows the user to select the right value (true, false or null). Angular is actually returning a string. To get concrete:

I have the following component:

@Component({
  selector: 'clientlist',
  templateUrl: './app/components/clientlist/clientlist.html'
})

export class ClientListComponent {  
   searchRequest : ClientSearchRequest;
}

I have the following tempalte:

<select [(ngModel)]="searchRequest.online" class="form-control" (onchange)="search()" numberBinder>
    <option value="">Select</option>
    <option value="true">Online</option>
    <option value="false">Offline</option>
</select>

And the search request model class:

export class ClientSearchRequest {
name: string;
online: boolean;
status: string;
page: number;
pageSize: number;

constructor() {
    this.name = "";
    this.online = null;
    this.status = "";
    this.page = 1;
    this.pageSize = 50;
}

}

When I let the model get filled, the online field is set with a string ("true"). How to fix this? What is the right approach without creating extra components etc.

Community · Accepted Answer · 2017-05-23 11:54:13Z

4

I would try to use the ngValue directive. This way you will be able to use an object instead of a string for values:

<select [(ngModel)]="searchRequest.online" class="form-control" 
        (onchange)="search()" numberBinder>
  <option [ngValue]="'null'">Select</option>
  <option [ngValue]="true">Online</option>
  <option [ngValue]="false">Offline</option>
</select>

Using a null value doesn't work so you need a workaround for this. See this question for more details:

Angular2 select with ngValue null

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered May 18, 2016 at 9:56

Thierry Templier

203k44 gold badges407 silver badges366 bronze badges

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

6 Comments

Maarten Kieft Over a year ago

When I apply this, I recieve the following error: Can't bind to 'ngValue' since it isn't a known native property

Thierry Templier Over a year ago

Which version of Angular2 do you use?

Maarten Kieft Over a year ago

AH! good question, beta 11, I will upgrade to the current version.

Thierry Templier Over a year ago

I don't know on which version it was added but in beta14 ng-value was renamed to ngValue. See the changelog: github.com/angular/angular/blob/master/CHANGELOG.md

Maarten Kieft Over a year ago

I took me a while to test it, but the upgrade indeed fixed the first problem in the comments. Its now mapping to a boolean. No I will try to do the null value. Thanks a lot :)

|

Collectives™ on Stack Overflow

Angular2: Parse input/select string value into strong typed value

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related