Angular 6 'string' is not assignable to type 'Number'

Question

I'm having trouble working out how to get rid of this error.

this.ticketService.updateTicket(this.edit_ticket)

this.edit_ticket is underlined in red and it says that Type 'string' is not assignable to type 'Number'.

In the edit_ticket model "timeInHours" and "price" are numbers, but I don't know how I should declare them in the json format.

I tried

timeInHours: Number;

but then it gives me another error: Type 'string' is not assignable to type 'NumberConstructor'.

If I understand correctly the values I'm grabbing from HTML are as strings, even from number inputs. How can I change that?

Editing works fine but the error in the IDE is annoying.

The code is below.

edit_ticket = {
    _id: '',
    timeInHours: '',
    location: '',
    price: '',
    vehRegistration: '',
    email: '',
    mobile: ''
}

editTicket(){
    this.edit_ticket._id = this.id;
    this.edit_ticket.timeInHours = (<HTMLInputElement>document.getElementById('timeInput')).value;
    this.edit_ticket.location = (<HTMLInputElement>document.getElementById('locInput')).value;
    this.edit_ticket.price = (<HTMLInputElement>document.getElementById('priceInput')).value;
    this.edit_ticket.vehRegistration = (<HTMLInputElement>document.getElementById('regInput')).value;
    this.edit_ticket.email = (<HTMLInputElement>document.getElementById('emailInput')).value;
    this.edit_ticket.mobile = (<HTMLInputElement>document.getElementById('mobInput')).value;


    this.ticketService.updateTicket(this.edit_ticket)
        .subscribe((data)=>{ 
        console.log("success");
});

TicketService code:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Ticket } from './ticket';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class TicketService {

  private apiUrl: string = "http://localhost:3000/tickets/";

  constructor(private http: HttpClient) { }

  getTickets(): Observable<Ticket[]>{
    return this.http.get<Ticket[]>(this.apiUrl);
  }

  getTicketsByReg(reg): Observable<Ticket[]>{
    console.log(this.apiUrl + "reg/" + reg);
    return this.http.get<Ticket[]>(this.apiUrl + "reg/" + reg);
  }

  getTicketById(id): Observable<Ticket>{
    console.log(this.apiUrl + id);
    return this.http.get<Ticket>(this.apiUrl + id);
  }

  deleteTicket(id): Observable<Ticket>{
    console.log(this.apiUrl + id);
    return this.http.delete<Ticket>(this.apiUrl + id);
  }

  updateTicket(ticket: Ticket): Observable<any>{
    const headers = new HttpHeaders()
   .append('Content-Type' , 'application/json');

    return this.http.put(this.apiUrl + ticket._id, ticket);
  }
}

Oh I removed the ": Ticket" part from updateTicket() and the error is gone. I think thats it, right? — eixcs, Sep 09 '18 at 15:37
You can use various operators in JavaScript to change a string to a number, but why with angular are you getting values using DOM methods instead of built in model binding such as ngModel, template driven forms, reactive forms or even event emitters? All of those approaches would allow to maintain types including complex ones in exactly the way you'd need. Is there a single example in the angular documentation getting values using DOM methods? — Alexander Staroselsky, Sep 09 '18 at 15:40
[Reactive Forms](https://angular.io/guide/reactive-forms) [Template Forms](https://angular.io/guide/forms) [Tour of Heroes](https://angular.io/tutorial/toh-pt1) — Alexander Staroselsky, Sep 09 '18 at 16:00

Angular 6 'string' is not assignable to type 'Number'

0 Answers0