nesecito una mano en esto, tengo el siguiente formulario en angular, estoy obteniendo los datos en el onInit que envia el backend pero el valor del bip lo recibo en duro, quisiera recibirlo dinamico, y la validacion hacerla con el submit del formulario, no he podido convertir el valor del bip a dinamico y no logro validar el codigo bip cuando se ingresa en el input, como comente por haora lo recibo en el onInit, al cargar la pagina, espero se entienda y me peudan ayudar, la duda que tengo es esta bien hacerlo por el metodo GET, O POST. Muchas Gracias.

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

<!-- language: lang-html -->

    <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>


<!-- end snippet -->

Tengo el siguiente servicio:

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

<!-- language: lang-js -->

    import { HttpClient } from '@angular/common/http';
    import { Injectable } from '@angular/core';
    import { BASE_URL_BIP } from '@environments/environment.local';



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

      constructor( private http: HttpClient ) { }

    // nesecito que eL codigo bip sea dinamico lo que envia el backend ahora esta puesto en duro, nesecito validar ese nuemero cuando se escriba en el input que esta en el HTML
      validateBip() {
        return this.http.get(`${BASE_URL_BIP}/v1/validationbip/is-valid?bip=56062496`);
      }
    }

<!-- end snippet -->

y este es e larchivo TS

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

<!-- language: lang-js -->

    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 { BipService } from "../bip-services/bip.service";

    @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]+$)";
      

      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 bipService: BipService
      ) {}
     
     //por ahora recibo los datos en el onInit, lo que nesecito es recibir el dato bip, cuand se presiona le boton submit del formulario.
      ngOnInit() {
        this.bipService.validateBip()
          .subscribe(resp => {
            console.log(resp)
          })
      }

      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();
      }

      onSubmit() {
        console.log(this.form.value);
        this.submitted = true;

        if (this.form.invalid) {
          return;
        }
        
        
        this.router.navigate(['payment-method']);
      }
      
     
    }

<!-- end snippet -->