0

Perdon, pues habia un comentario anterior donde se explicaba lo que se requeria, explicare de nuevo y dejare unas capturas, en el primer fragmento de codigo que es un ts, esto llama a un servicio, desde un backend que enva esta Url y este parametro.

 validaBip() {
    this.form.valueChanges
    .pipe(
      debounceTime(1000)
    )
    .subscribe( (query:number) => {
      this.validateBip(query)
    })
  }
  validateBip(query: number) {
     this.http.get(`${BASE_URL_BIP}/v1/validationbip/is-valid`, {
      params : new HttpParams()
      .set('bip', query),
     }).subscribe(result => {
       console.log(result, 'result');
     })
   }
   
   // se incoca a la funcion
   
     ngOnInit() {
    
 
    this.validaBip()

  }

el valor de .set es el parametro que concanteno con un input que esta en el html, y deberia concatenar asi :

this.http.get(`${BASE_URL_BIP}/v1/validationbip/is-valid?bip=56062496`)

pero al hacer eso con el input e intentar la concatenacion me devuelve un error este: introducir la descripción de la imagen aquí

si invoco el servicio directamente sin usar el input y envio el paramtro directamente en la linea del servicio si me responde existoso la respeusta:

// Servicio

validateBip() {
    return this.http.get(`${BASE_URL_BIP}/v1/validationbip/is-valid?bip=56062496`)
  }
  
  
  //Obtengo el servicio
  
  ngOnInit() {
    
    this.bipService.validateBip()
      .subscribe(resp => {
        console.log(resp,)
      })


  }

ya la respeusta es exitosa: introducir la descripción de la imagen aquí

Nesecito lograr lo mismo pero no enviando el parametro en duro o harcodeado, si no que se concatene cuando se ingresa el valor en el input del Html y se arme esa estructura pero recibo el error mencionado, espero quede claro, Gracias

Postaman me envia este estructura:

introducir la descripción de la imagen aquí

import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { Router } from "@angular/router";
import { BipinfoModalComponent } from "@apps/components/bipinfo-modal/bipinfo-modal.component";

import { ModalController } from "@ionic/angular";
import { debounceTime } from "rxjs/operators";
//import { BipService } from "../bip-services/bip.service";
import { HttpClient, HttpParams } from "@angular/common/http";
import { BASE_URL_BIP } from "@environments/environment.local";

@Component({
  selector: "app-bip-recharge",
  templateUrl: "./bip-recharge.page.html",
  styleUrls: ["./bip-recharge.page.scss"],
})
export class BipRechargePage implements OnInit {
  submitted = false;
  ExpRegSoloNumeros = "(^[0-9]+$)";
  
  public bip: number;
  form: FormGroup = this.fb.group({
    numeroTarjeta: [
      ,
      [
        Validators.required,
        Validators.minLength(8),
        Validators.maxLength(8),
        Validators.pattern(this.ExpRegSoloNumeros),
      ],
    ],
    nombreTarjeta: [
      ,
      [
        Validators.required,
        Validators.minLength(1),
        Validators.maxLength(30),
        
      ],
    ],

  });

  constructor(
    public router: Router,
    public modalController: ModalController,
    public fb: FormBuilder,
    private http: HttpClient,
    //private bipService: BipService
  ) {}
 

  ngOnInit() {
    
    this.validaBip()
  }

  

  validaBip() {
    this.form.valueChanges
    .pipe(
      debounceTime(1000)
    )
    .subscribe( (query:number) => {
      this.validateBip(query)
    })
  }
  validateBip(query: number) {
     this.http.get(`${BASE_URL_BIP}/v1/validationbip/is-valid`, {
      params : new HttpParams()
      .set('bip', query),
     }).subscribe(result => {
       console.log(result, 'result');
     })
   }

  get f() {
    return this.form.controls;
  }

  public goBack() {
    this.router.navigate(["/home/pagar"]);
  }

  async mostrarModal() {
    const modal = await this.modalController.create({
      component: BipinfoModalComponent,
      cssClass: "bipinfo-modal-class",
    });
    await modal.present();
  }

  async onSubmit() {
    
    this.submitted = true;

    if (this.form.invalid) {
      return;
    }
    
    this.router.navigate(['payment-method']);
  }
  
 
}
<bip-recharge-header [title]="'Recarga bip!'"></bip-recharge-header>


<ion-content>
  <form [formGroup]="form" >
    <div class="container">
      <p class="title">Ingresar información</p>

      <p class="text">
        A continuación debes ingresar los datos de tu tarjeta bip!
      </p>

      <p class="title">Número de tarjeta bip!</p>
      <div class="input-icon">
        <input class="input" type="text" placeholder="Ej: 12345678" formControlName="numeroTarjeta" [ngClass]="{'is-invalid': submitted && f.numeroTarjeta.errors}"/>
        <button ion-button class="btn-modal" (click)="mostrarModal()">
          <img
            class="info-icon"
            src="assets/icons/iconos-recarga-bip/ico-info.svg"
          />
        </button>
      </div>

      <p class="text2">8 dígitos</p>

      <p class="text-qr">
        O escanea el código de barras
        <img class="qr-img" src="assets/icons/iconos-recarga-bip/ico-qr.svg" />
      </p>

      <p class="title">Nombre de la tarjeta</p>

      <input class="input" type="text" placeholder="Ej: Tarjeta mamá" formControlName="nombreTarjeta" [ngClass]="{'is-invalid': submitted && f.nombreTarjeta.errors}"/>
    </div>
  </form>
</ion-content>

<ion-footer>
  <ion-toolbar class="footer">
    <form [formGroup]="form">
    <div class="footer-div">
      <button type="submit" class="btn-guardar" (click)="onSubmit()" >Guardar</button>

      <button ion-button class="btn-cancelar" (click)="goBack()">Cancelar</button>
    </div>
  </form>
  </ion-toolbar>
</ion-footer>




y este es e larchivo TS

<!-- begin snippet: js hide: false console: true babel: false -->

3
  • "Postman me envía esta estructura" -> Pero si en tu captura no se ve la respuesta, tan solo se ve la petición. Cómo vamos a saber qué te envía postman?? De todas maneras, si en el html aparece [Object object] es porque... adivina, es un OBJETO!! Estás intentando pintar algo así: {nombre: perico} cuando deberías pintar objeto.nombre. Te podría decir exactamente dónde está el problema, pero la pregunta no tiene absolutamente ningún dato relevante para poder ayudarte. En qué parte se pinta ese objeto? Qué devuelve realmente el servicio?? No has puesto absolutamente ningún detalle importante!
    – Benito-B
    Commented el 20 jun. 2023 a las 5:59
  • @Benito-B mejore la pregunta espero se entienda y se pueda ayudar, Gracias. Commented el 20 jun. 2023 a las 11:45
  • Que tú pongas query: number no implica que query vaya a ser un número... el objeto que te da el valueChanges de un formulario es el valor del formulario, deberías enviarle a tu servicio query.numeroTarjeta, que es el nombre del campo donde tienes el número que quieres comprobar. Hay una cosa muy importante que se debe hacer cuando se programa y es DEBUGAR. Un simple console.log() dentro de tu método validateBip te habría mostrado que el objeto no es lo que esperas.
    – Benito-B
    Commented el 21 jun. 2023 a las 5:31

1 respuesta 1

0

El error que que tienes es que estas pasando un objeto en lugar de un valor numerico en la petición. Recuerda que "valueChanges" de angular devuelve un objeto que contiene los valores de todos campos.

Para obtener el valor dei input "numeroTarjeta" en la función validateBip() te recomiendo que uses una referencia al input "numeroTarjeta" utilizando la directiva #. (Vea esto)

<input class="input" type="text" placeholder="Ej: 12345678" formControlName="numeroTarjeta" [ngClass]="{'is-invalid': submitted && f.numeroTarjeta.errors}" #bipInput>

Luego en el componente usa la referencia de ese input para que obtengas su valor:

validateBip() {
  const bip = this.form.get('numeroTarjeta').value;
  this.http.get(`${BASE_URL_BIP}/v1/validationbip/is-valid`, {
    params: new HttpParams().set('bip', bip)
  }).subscribe(result => {
    console.log(result, 'result');
  });
}

Ahora, cuando llames a la función validateBip(), si vas a obtener el valor actual del input numeroTarjeta y podras pasarlo como parametro. Deberias si quieres agregar validaciones adicionales para asegurarte que sea un numero y que tenga el tamaño correcto.... etc

Espero te ayude y se resuelva.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.