I've been searching for a solution for quite some time now, but I'm still a bit confused. The issue is simple: I have a model with a boolean property that I'm mapping to a select element in Angular. The select allows the user to choose between true, false, or null values, but Angular is returning a string. Here's a more concrete example:
In my component:
@Component({
selector: 'clientlist',
templateUrl: './app/components/clientlist/clientlist.html'
})
export class ClientListComponent {
searchRequest : ClientSearchRequest;
}
Here's the template:
<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 ClientSearchRequest 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 the model gets filled, the online field is set as a string ("true"). How can I resolve this issue without creating additional components?