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:
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,)
})
}
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:
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 -->
{nombre: perico}
cuando deberías pintarobjeto.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!query: number
no implica quequery
vaya a ser un número... el objeto que te da elvalueChanges
de un formulario es el valor del formulario, deberías enviarle a tu servicioquery.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 simpleconsole.log()
dentro de tu métodovalidateBip
te habría mostrado que el objeto no es lo que esperas.