Transferring the date from an HTML input to a TypeScript file in Angular when the button

On my HTML page, I have two input fields for dates that need to be passed to the backend along with other parameters when a button is clicked. Here is the current setup:

    <input [owlDateTime]="dt1" placeholder="From a date" [value]="dateFrom.value">
    <span [owlDateTimeTrigger]="dt1"><i class="fa fa-calendar"></i></span>
    <owl-date-time #dt1></owl-date-time>


    <input [owlDateTime]="dt2" placeholder="To a date" [value]="dateTo.value">
    <span [owlDateTimeTrigger]="dt2"><i class="fa fa-calendar"></i></span>
    <owl-date-time #dt2></owl-date-time>


    <button class="startButton" mat-raised-button color="primary"
       (click)="loadData(81,topSelect.value,txtFilter.value,dt1.getValidDate,dt2.getValidDate)">
      Search
      <i class="fa fa-search pb-icon" aria-hidden="true"></i>
    </button>

In the TypeScript file:

  public loadData(customerId: number, topResult: number, searchTxt?: string, dateFrom?: Date, dateTo?: Date) {
    this.interfaceService.getLogsForCustomer(customerId, topResult, searchTxt, dateFrom, dateTo).subscribe((logs: Log[]) => {
      this.logs = logs;
      this.dataSource = new MatTableDataSource<Log>(this.logs);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
      this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
    });
  }

Answer №1

Ensure to include a form tag in your code. The options available are:

  1. Template driven forms

or

  1. Reactive forms.

By using either of these, you will benefit from validation features and useful utilities for handling user input.

If you prefer not to use forms, you can opt for ngModel. The two-way binding [(ngModel)] allows for automatic updates of values in the 'backend' without requiring a button press.

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

Tips on formatting the date model field in an Angular 2 form

I have a model with a date field in MySQL format "yyyy-mm-dd hh:ii:ss" When displaying this field in my form, I want to show it in an input with a custom format: "dd/mm/yyyy" <input [(ngModel)]="model.date" name="date" view-format="DD/MM/YYYY" model-f ...

The type undefined cannot be assigned to the type even with a null check

When looking at my code, I encounter an error stating Argument of type 'Definition | undefined' is not assignable to parameter of type 'Definition'. Even though I am checking if the object value is not undefined with if (defs[type] != u ...

Leveraging NgClass with observables

Wondering what the best practice is for handling observables in authentication. I have sections of my code where different content needs to be rendered based on whether the user is logged in or not. Currently, I am using "*ngIf="accountService.currentUser$ ...

Setting a default value for a complex prop in Vue through Type-based props declarations

I'm struggling with this issue: Argument of type 'HelloWorldProps' is not assignable to parameter of type 'InferDefaults<LooseRequired<HelloWorldProps>>'. Types of property 'complexProp' are incompatible.ts( ...

What are the steps to set up a dictionary with predetermined values?

My task is to create a pre-defined dictionary where the key represents a city and the value is an array of zones in that city. Here is my attempt: export const cityToZone: { [city: string]: Array<string> } = [ {city:'New York', [&apos ...

"ENUM value is stored in the event target value's handle property

My issue lies with the event.target.value that returns a 'String' value, and I want it to be recognized as an ENUM type. Here is my current code: export enum Permissions { OnlyMe, Everyone, SelectedPerson } ... <FormControl> & ...

What purpose does a cast serve when used on a return type that is defined generically?

Consider this straightforward property access function export function accessProperty<T, K extends keyof T, P extends T[K]>(name: K, v: T): P { return v[name] as P } What is the significance of the cast as P in this context? I experimented with ...

Exploring the optimal procedures to asynchronously request an external API in Node.js using TypeScript

When handling a POST API request in a Node.js application built using TypeScript, it's necessary to make a call to an external API. This external API operates independently and must run in the background without impacting the response time. How can t ...

TypeScript is unable to identify the data type of class members

I am working with a class called Colors: export class Colors { constructor( private domainColors: string[] = ['#F44336', '#FDB856', '#59CA08', '#08821C'], private numberRange: [number | string, number | string] = [-1 ...

The child component stays consistent across all Angular routing configurations

Currently diving into Angular routing, I've added two routerLinks to the parent component. It appears that routing is set up correctly, but for some reason the page remains unchanged. Parent Child const childrenRoutes: Routes =[ {path: 'overvi ...

Tips for linking an Express JS server to an Angular 6 file?

I have been researching how to create a user login system using Express, Node.js, and Angular. However, I haven't found a clear answer on how to add new pages with Angular. Can someone guide me on the process and recommend the necessary modules to use ...

Creating a JavaScript library with TypeScript and Laravel Mix in Laravel

I have a Typescript function that I've developed and would like to package it as a library. To transpile the .ts files into .js files, I am using Laravel Mix and babel ts loader. However, despite finding the file, I am unable to use the functions: ...

What is the reason behind the equality comparison between number[][number] and number in TypeScript?

https://i.stack.imgur.com/htnkb.png type Test = number[][]; // The Test type will be inferred as 'number' based on the image above. Can you explain why number[] is considered an index signature type with a signature of 'number'? ...

Adding a new line in the configurations of MatDialogConfig (Angular)

Here is a code snippet: private mDialog: MatDialog, const dialog = new MatDialogConfig(); msg = "I enjoy coding in Angular.\r\n I am learning TypeScript." dialog.data = { message:msg }; alert (msg); mDialog.open(AB ...

Exploring the capabilities of @angular/cli and integrating it with non-angular scripts can significantly

After upgrading my application to Angular 5, I decided to experiment with @angular/cli instead of using different webpack configs from the Angular starter package like I did previously. Our build process is fairly simple except for one aspect that I' ...

Sending data from view to controller in Angular using TypeScript

I am currently working with AngularJS and TypeScript, and I have encountered an issue with passing a parameter from the view to the controller. In my attempts to solve this problem, I have utilized ng-init as follows: <div class="col-md-9" ng-controlle ...

Leveraging RXJS Observables and Subjects in combination with Redux is an effective strategy for efficiently managing and processing data

My current project involves utilizing a redux architecture alongside Observables. It has come to my attention that I need to handle data processing after retrieving data from various asynchronous sources. The process is intended to function as follows: ...

An anomaly with the checkbox editing feature in the PrimeNG table

Within my Angular 5 application, I am utilizing the PrimeNG "turbo" table component and encountering an issue while trying to edit a checkbox. If you want to learn more about PrimeNg tables, visit primeNg - table https://i.sstatic.net/ryZ2A.gif As depict ...

Error in Redirecting to Localhost

Recently, I developed an Angular App that interacts with the MS Graph API using MSAL. Initially, everything worked smoothly when running "ng serve" in Angular CLI. However, I encountered a problem when I packaged this Angular App with electron to deploy i ...

Guide to leveraging clsx within nested components in React

I am currently using clsx within a React application and encountering an issue with how to utilize it when dealing with mappings and nested components. For instance: return ( <div> <button onClick={doSomething}>{isOpened ? <Component ...