Enhancing the getDate function in JavaScript with additional days

My function for selecting the date is working perfectly:

formatDateField(event: Date, formControl: string) {
    this.form
      .get(formControl)
      .patchValue(
        this.datePipe.transform(event.getTime(), "yyyy-MM-dd'T'HH:mm:ss")
      );
  }

Recently, I added a button to add days to the date using the code below. However, the developer's console shows "undefined" as an error message:

  addDaysToDateForm(formName: string, days: number) {
    let formDate: Date = this.form.get(formName).value || new Date();
    formDate.setDate(formDate.getDate() + days);
    this.form.get(formName).setValue(formDate);
  }
  setTodayForm(formName: string) {
    this.form.get(formName).setValue(new Date());
  }

Does anyone have any idea what could be wrong with it?

Answer №1

Currently, Typed Forms are not available (as mentioned by @T.J.Crowder in the comments). This means that the values returned from form inputs are not typed. To convert the value returned from this.form.get(formName).value to a date, you can simply call new Date() on it. For example:

new Date(this.form.get(formName).value)

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

Unable to find 'react/lib/merge' module

I'm currently working on a React project and utilizing Babel and Webpack. Within one of my files, I have this require statement: var merge = require('react/lib/merge'); Unfortunately, I'm encountering the following error: ERROR in . ...

Monitoring the download status in the web browser: Angular 5

Currently, I'm in the process of developing an application that interacts with a REST API to download files. As per the API's behavior, it responds with the file immediately upon request. So, I've implemented the following logic to facilitat ...

User-initiated closure of popup triggers error during Google sign in

After successfully implementing Google signin locally, I encountered an issue when attempting to login on a server. The error message displayed was: 'Uncaught: popup closed by user' Despite disabling adblockers and other potential interference, ...

Using jQuery to loop through a table and retrieve the button value from every row

I have a challenge with dynamically created buttons in a table. My goal is to loop through the table, identify the rows that have a checked checkbox, and retrieve the value of a button within that row. I then need to store these values in an array. Unfortu ...

The Router.url function consistently returns a forward slash instead of the actual current URL

I'm puzzled as to why, in this scenario, my current URL shows '/' when I refresh the page on '/component'. Shouldn't it show '/component' instead? However, the URL appears correct in the this.router array... Here ...

Unable to deserialize an instance of java.util.List from the VALUE_STRING

In the process of developing a new application, my goal is to send data to a server and receive a response in a specific format. Here's an example of how the format should look: { "userName" :"<a href="/cdn-cgi/l/email-protection" class="__cf_e ...

Angular2 URL fragment not recognized in Firefox

My website's main page is divided into different sections: Introduction Services Projects All the content is on the same page. To navigate to a specific section, I use Angular2 fragments in my navigation structure. Here's the HTML snippet for ...

What is the best way to access JavaScript built-ins in Typings when faced with name conflicts?

I am currently in the process of updating the Paper.js Typings located on GitHub at this repository: github.com/clark-stevenson/paper.d.ts Within Paper.js, there exists a MouseEvent class, which is not an extension of JavaScript's MouseEvent, but ra ...

Updating Previous and Next links in an Angular Table following row deletions: A step-by-step guide

I need to implement a feature where row elements can be deleted by enabling checkboxes on the rows and clicking the Delete button. Although I am able to successfully delete items from the table upon clicking the Delete button, I am facing challenges in upd ...

offspring of offspring in jquery animation remains stationary

I'm experiencing an issue with a jquery animation on containers that are set to 100% width and height. Specifically, the children elements that have position absolute move with the container, but when a child of a child has two instances of position a ...

Display a preview of the uploaded image

Is there a way to separate the image previews when selecting a picture using a JavaScript code for input file image preview? function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader() reader.onload = f ...

You are unable to apply 'use client' on a layout element in Next.js

While attempting to retrieve the current page from the layout.txt file, I encountered errors after adding 'use client' at the top of the page: Uncaught SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data parseMod ...

Updating the default value for react-i18next (stored in localstorage)

When utilizing a backend and language detector, an issue arises: The localstorage contains the key I18nextLng with the value en-US. How can we set the default value to be I18nextLng with the value En? init and other settings are as per the default docume ...

Ways to reset an input field when focused

Looking to implement a number input field in React that clears the initial value when the user clicks on it. While there are solutions available for text inputs, I have not come across a method for number inputs. Every attempt I make at solving this issu ...

Angular Input Mask with Validation for Versions 2, 4, and 5 and Beyond

What is the process for validating and displaying validation messages using Angular's Template-driven approach? ...

Utilizing ExpressJS: importing Multer module in a separate file

After following the instructions in the GitHub readme file for multer, I encountered a dilemma. The readme suggested calling multer in middleware as shown below: app.js var multer = require('multer') app.post('/upload', upload.single( ...

The error message "Module 'electron' not found" is commonly encountered when working with Electron and TypeScript

Hey there! I'm having some trouble with Electron not supporting TypeScript on my setup. I'm using vscode 1.16.1 and here is an overview of my package.json: { [...] "devDependencies": { "electron": "^1.6.13", "ts-loader": "~2.3.7", ...

Ionic 5.9.1 and Angular 12 FormControlName

Currently, I am delving into the realm of Reactive Forms with Angular 12 and Ionic 5.9.1 on my app. To my surprise, upon checking the latest documentation on the https://ionicframework.com/docs/api/input#properties Ionic website, I realized that there is n ...

Updating and eliminating text within an array of objects using Vue JS

My Axios request pulls in an array of objects named 'uniquecolors'. Here is what it looks like: mycolors color: [GREEN, RED, BLUE, YELLOW, ORANGE,ORANGE,GREEN,] color: [GREEN, RED, BLUE, YELLOW, ORANGE,ORANGE,GREEN,] color ...

Incorporate a script into your Angular-CLI project

Can you guide me on inserting a script file into the index file of an angular2 project that was generated using angular-cli? : <!doctype html> <html> <head> <meta charset="utf-8"> <title>MyAngularApp</title> ...