The service is failing to acknowledge the submission value from the form

This is my read.html page where users fill out a form and submit it.

<form class="mt-3 text-center" (ngSubmit)="onSubmit()">
              <div class="text-center">
                <input type="text" name="barcode" class="form-control text-center mt-2" [(ngModel)]="barcode" placeholder="Barcode">
              </div>
            </form>

In my read.ts file, the form submission triggers a service call to retrieve information.

 constructor(private ticketlineservice: TicketlineService, 
    private activatedRoute: ActivatedRoute) {
      this.activatedRoute.queryParams.subscribe(params => {
        this.codEspec = params['CodEspec'];
        this.DiaHoraEspecs = params['DiaHoraEspecs'];
    });
     }

  ngOnInit() {

  }

  onSubmit(){      
    console.log(this.barcode,this.codEspec,this.DiaHoraEspecs );
    this.ticketlineservice.CheckTicket(this.barcode, this.codEspec, this.DiaHoraEspecs).subscribe(reads => {
      this.reads = reads[0].Tickets;
      console.log(reads);
  });
}

This is the function of the service I am calling. The additional parameters (codEspec and DiaHoraEspecs) are obtained from a previous URL.

 CheckTicket(barcode, codEspec, diaHoraEspec):Observable<Ticket[]>{
    //get all events
    return this.http.get<Ticket[]>(`${this.url_node_tickets}${this.barcode}${this.codEspec}${this.diaHoraEspec}`, httpOptions);
  }

Issue: While the correct values are displayed in the console log, the barcode value does not update in the URL.

Answer №1

ValidateTicket(qrcode, specCode, dateTimeSpec):Observable<Ticket[]>{
    //retrieve all events
    return this.http.get<Ticket[]>(`${this.url_node_tickets}${qrcode}${specCode}${dateTimeSpec}`, httpOptions);
  }

${qrcode}${specCode}${dateTimeSpec}

I suggest removing the this (class reference) from there and using the function parameters instead.

${qrcode}${specCode}${dateTimeSpec}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 4 Datepicker failing to show date in the format of MM/DD/YYYY

Within my Angular 4 project, I have incorporated a datepicker in the HTML code. This is what it looks like in the HTML: <mat-form-field class="col-sm-12 nopadding pull-left"> <input matInput [matDatepicker]="date" placeholder="Please select ...

The Angular 2 application functions perfectly when running locally, but encounters issues when running on an ec2 instance

When trying to upload an Angular 2 application to an AWS EC2 t2.small instance, it is not working as expected, even though it runs successfully in a local server. Node version: v7.0.0 NPM version: 3.10.8 There has been an EXCEPTION: Uncaught (in prom ...

The Angular Universal error arises due to a ReferenceError which indicates that the MouseEvent is not

I am encountering an error while trying to utilize Angular Universal for server-side rendering with the command npm run build:ssr && npm run serve:ssr. This is being done in Angular8. /home/xyz/projects/my-app/dist/server/main.js:139925 Object(tslib__WEB ...

Tips for selecting specific regions on an Angular SVG map

For my Angular TypeScript project, I included a map. Does anyone know how to create a select region on the map? Click here for StackBlitz Here is the jsFiddle code link CSS styles here p { font-size: 12px; } #core { fill: #ff4f81; animatio ...

Raycasting in Three.js is ineffective on an object in motion

Working on a project that combines three.js and typescript, I encountered an issue while attempting to color a sphere by raycasting to it. The problem arises when the object moves - the raycast doesn't seem to acknowledge the new position of the objec ...

Using Systemjs to transpile TypeScript async functions

When I manually build .ts files using the tsc tool, I notice that wrappers are generated for async/await keywords. However, I am facing an issue setting up transpile on-the-fly using SystemJS. Here is my index.htm configuration: <script src="https:// ...

Using styled-components and typescript to override props

Currently, I am faced with the challenge of using a component that necessitates a specific property to be set. My goal is to style this component with the required property already defined, without having to manually specify it again during rendering. Howe ...

What is the best method for accessing the properties of a JavaScript object based on input from a textbox?

Just starting out with angular and having trouble generating or updating a table based on text boxes. The schema includes country, sales, and profit fields. There are two text boxes for the x-axis and y-axis inputs. The table should dynamically update when ...

Utilizing Json Service in Liferay with Angular2

After attempting to integrate Angular 2 into Liferay 7, I am facing difficulties with consuming json services. The issue may be related to the multitude of 404 errors occurring due to node_modules not being found under /web/guest. An example can be seen he ...

"Troubleshooting: Module not found" (Getting started with Jest in a nested project connected to a shared directory)

I've recently taken over a project that contains the following folder structure: node_modules/ server/ ├── node_modules/ ├── src/ │ └── helpers/ │ ├── updateTransactions.ts │ └── updateTransactions.tes ...

Fetching data from an API using Observables in Angular

I am facing a challenge with an API endpoint that returns an array of strings in JSON format. My goal is to display these contents on a webpage using an Angular Service. Below is the code snippet I have implemented so far (working with Angular 7): export ...

How to configure dynamic columns in material-table using React and TypeScript

My task involves handling a table with a variable number of columns that are generated dynamically based on the data received. To manage these columns, I have designed an interface that defines various properties for each column, such as whether it can be ...

"Data in Fusioncharts appears to be correctly formatted, but it is having difficulties

I am developing a financial analysis tool and I need to visualize stock data using fusion charts. Currently, my dataset includes stock values along with their respective dates: $scope.chartData = [ { "label": "2017-05-11 16:00:00", "value": "930.6" } ...

React Hook: Child Component's onComplete Callback Cannot Call Parent Component's Dispatch

I've attempted multiple solutions to address this issue, but none have proven successful. In my scenario, a third-party library makes an asynchronous call to load content for rendering in the DOM. To integrate this functionality, I have a component ...

Patience is key when hoping for a reaction nested within another in Redux

I am attempting to recycle one of my actions. Here is the structure of my actions: const actions = { changeStage: (data: Object) => (dispatch) => { return new Promise((resolve) => { dispatch({type: ACTION_TYPES.Loader, payload: ...

An effective approach to automatically close an Expansion Panel in an Angular Mat when another one is opened

I am attempting to implement functionality where one expansion panel closes when another is opened. By default, the multi attribute is set to "false" and it works perfectly when using multiple expansion panels within an accordion. However, in this case, I ...

Error code 2 was encountered when trying to exit the Mongod Service

Issues Encountered Hello! I'm facing an error when attempting to start and check the status. skozurak@danny:~$ service mongod start skozurak@danny:~$ service mongod status ● mongod.service - MongoDB Database Server Loaded: loaded (/lib/systemd ...

Rendering options for Ngx typeahead in Angular 6

Currently, I am utilizing the Angular ngx-bootstrap typeahead plugin available at this link https://i.sstatic.net/wcrmT.png While using the input typeahead in a modal, The option values appear inside the modal container. However, I do not want them to ...

I seem to be missing some properties in the request body schema. Why am I receiving an incomplete model for

Seeking assistance in grasping the working of models in loopback4. Here's a model I defined: @model() export class ProductViewConfig extends BaseConfig { @property({ type: 'string', id: true, generated: true, }) _id?: strin ...

Using Angular with Cordova - How to troubleshoot using TypeScript files?

Currently in the process of debugging the application using source files written in Typescript. Despite attempting to debug with Chrome, I have been limited to only being able to debug the Javascript files generated by Cordova which has proven difficult. ...