save the value of an input in a variable in angular 5

Question

I am new at angular and I am trying to get the value of an input and save it in a variable to pass it to my service that needs a parameter:

this is my html

<form class="main-form">

  <div class="form-group col-md-4">
    <label for="cedula">Numero de cedula</label>
    <input type="text" class="form-control" id="cedula" name="cedula [(ngModel)]="cedula" placeholder="Ingrese su numero de cedula">
   <br>
   <button type="submit" (click)="getReservas(cedula)" class="btn btn-primary">Consultar</button>

  </div>

</form>
<h1>Usuario Reservado</h1>
<div class="clear"></div>
<table class="table" >
  <thead>
    <tr>

      <th scope="col">Cedula</th>
      <th scope="col">Nombre</th>
      <th scope="col">Edad</th>
      <th scope="col">Fecha</th>
      <th scope="col">Origen</th>
      <th scope="col">Destino</th>
      <th scope="col">Hora</th>
      <th scope="col">Telefono</th>
      <th scope="col">Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of reserva">

      <td>{{item.cedula}}</td>
      <td>{{item.nombre}}</td>
      <td>{{item.edad}}</td>
      <td>{{item.fechar}}</td>
      <td>{{item.origenr}}</td>
      <td>{{item.destinor}}</td>
      <td>{{item.hora}}</td>
      <td>{{item.telefono}}</td>
      <td>{{item.precior}}</td>

    </tr>

  </tbody>
</table>

this is my component

import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';

import {ReservasService} from './reservas.service';
import {ReservasModel} from './../modelo/reservas.model';

@Component({
  selector: 'app-reservas',
  templateUrl: './reservas.component.html',
  styleUrls: ['./reservas.component.css'],
  providers:[ReservasService]
})
export class ReservasComponent implements OnInit {
    private reserva:Array<ReservasModel>;
    private cedula:String;
  constructor(private rs:ReservasService) { }

  ngOnInit() {
    this.loadRes();
  }

private loadRes():void{
    this.rs.getReservas(this.cedula).subscribe(res=>{
        this.reserva=res;

    });
}
}

my service

import { Injectable } from '@angular/core';
import  {HttpClient} from '@angular/common/http';
import { Observable } from 'rxjs';

import {ReservasModel} from './../modelo/reservas.model';


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

  constructor(private http:HttpClient) { }

  public getReservas(cedula:String):Observable<ReservasModel[]>{

    return this.http.get<ReservasModel[]>("http://localhost:8080/getConsultarCc?cc="+cedula);

  }
}

what am I doing wrong, I would thank whoever can help me.

try this form but I get error:https://stackoverflow.com/a/39959287/10543023 and https://es.stackoverflow.com/a/5845

Answer 1

You are missing closing the " in the input field. You should be closing the " in order for the angular two way binding to work using ngModel.

HTML

<input type="text" class="form-control" id="cedula" name="cedula" [(ngModel)]="cedula" placeholder="Ingrese su numero de cedula">

TS

private cedula:string;

I full working example: https://stackblitz.com/edit/angular-tfjpgu

Two more things:

1) Also you should be using string instead of String. Take a look to the answers here: Typescript: difference between String and string

2)if you are going to be using private variables make sure you use getters and setters. I don't suggest you to make them private unless they are for constructors or classes. it's not good practice to not declare getters and setters on private variables in the components.

Typescript Class with private variables. If you decide to leave the private varible change your code after you have created the setters.

private loadRes():void{
    this.rs.getReservas(this.getCedula()).subscribe(res=>{
        this.reserva=res;

    });
}