Unable to extract data from text-box after utilizing the Date picker

Hello Team at Stack Overflow, When I click the edit link to modify customer details, the edit form is displayed. The form shows all existing data except for the datepicker data which is not being displayed. All the data is coming from the Web API.

EditUserComponent.html

 <mat-form-field class="demo-full-width">
              <input matInput [matDatepicker]="picker" matTooltip="Enter Date Of Birth"
                placeholder="Choose Date Of Birth" formControlName="DateOfBirth">
              <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
              <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>

EditUserComponent.ts

   this.service.getRegistrationDetails(this.registrationId).subscribe(data => {
  this.updateUserForm.controls['First_Name'].setValue(data.FirstName);
  const dateOfBirth = this.datePipe.transform(data.DateOfBirth.toString(), 'MM/dd/yyyy');});

Service.ts

getRegistrationDetails(registrationId: string): Observable<Register> {
// debugger;
return this.http.get<Register>(this.url + '/GetRegistration/' + registrationId);
}

Answer №1

Based on the EditUser typescript file you provided, it seems that you are not correctly setting the date value in your FormControl. You have stored the date value in a constant variable called dateOfBirth, but you are not using it anywhere after that. To properly set the date value, you may need to add the following code:

this.updateUserForm.controls['DataOfBirth'].setValue(dateOfBirth);

Make sure to do this after storing the value in your constant variable.

Additionally, upon reviewing the code again, it is possible that you are passing an incorrect date format to the control. The Angular DatePicker typically works with native Javascript Date objects by default.

If the birth date data type coming from the getRegistrationDetails() function is a string, you can convert it to a Date object as shown below. If the data is already a Date object, you can skip the conversion and directly set it in the form control.

this.service.getRegistrationDetails(this.registrationId).subscribe(data => {
  const dateOfBirth = new Date(data.DataOfBirth);
  this.updateUserForm.setValue({
    'First_Name': data.FirstName,
    'DataOfBirth': dateOfBirth
  });
});

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

Updating the value of a variable in a separate file with Node.js

I'm facing a business scenario that can be likened to a challenging situation. To simplify, here's the problem: File1.ts import * from 'something'; export const var1="value of var1"; //assume there is a variable 'x' ...

I encountered an error when trying to install '@angular/cli' using the command 'sudo npm install -g @angular/cli' on Ubuntu

Encountering a problem while attempting to install Angular-CLI on Ubuntu My current Node.js and npm versions are as follows: Node-v9.11.1 npm - 5.6.0 The command I ran was: savera9@savera9-desktop:~$ sudo npm install -g @angular/cli Howev ...

What is the best way to retrieve key/value pairs from a JSON object?

After making a call to an external service, I receive a domain object in return: var domainObject = responseObject.json(); This JSON object can then be easily accessed to retrieve specific properties. For example: var users = domainObject.Users The &ap ...

Implementing a SetTimeout Function in HTML

Is there a way to delay calling the mouseHoverTableRow() function until after hovering on tr for 3 seconds? I only want to call this function if the hover duration is at least 3 seconds, as it triggers an API request. How can I achieve this? <tr *ngF ...

Leveraging the power of APIs to bring in the Chicago Art Institute into a React TypeScript

Struggling to import a list of image details from the Chicago Art Institute into my React application. I need help understanding APIs, so a detailed answer would be appreciated. I have the code for the image list but can't figure out how to make it wo ...

Choose the property category

Is there a more efficient way to specify the type of a property in TypeScript without resorting to casting? Take a look at this example: interface Overlay { type: "modal" | "drawer" other?: number } const rec = { obj1: { ty ...

Determine parameter types and return values by analyzing the generic interface

I am currently working on a feature where I need to create a function that takes an interface as input and automatically determines the return types based on the 'key' provided in the options object passed to the function. Here is an example of ...

Unlocking the power of React using TypeScript for optimal event typing

I need assistance with properly typing events in TypeScript. Consider the following function: import * as React from 'react'; someHandler = (event: React.SyntheticEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>) =&g ...

Limiting the number of items shown in the dropdown panel of an NgSelect

Currently, I am utilizing Angular ngselect to showcase a dropdown menu with multiple options. However, due to the limited screen space, I need to restrict the number of items visible in the dropdown to about 3, allowing users to scroll through the rest. W ...

Using angular2's transformRequest feature for converting XML to JSON

I successfully converted an XML response to JSON format in Angular 1 by using the code snippet below. However, I'm now wondering how I can achieve a similar outcome in Angular 2. var xml = function () { $http.get("./app/sampleXML.xml", ...

Using Angular to bind a click event to an element after it has been compiled

I am currently developing an application for students using Angular 5. In this application, users can access and view various documents. When a user enters a document, a set of tools, including a marker tool, are displayed. This marker tool allows users to ...

`Managing select tag data in Angular reactive forms`

Having an issue with selecting the gender option from JSON formatted data received from the backend. The gender is displayed as a select tag on the frontend, but it does not pre-select the option that corresponds to the gender value in the JSON data. The b ...

hide navigation on login/registration pages and display only in inner pages

My goal is to display the navigation bar only on inner pages of the application, not on the login or register pages. To achieve this, I have created a separate component for the navigation, and in the app.component.html file, I am trying to show it like t ...

Property element does not exist in this basic TypeScript project

I'm diving into my initial TypeScript project and encountering an issue with the "style". I attempted to utilize style!, create an if(changeBackgroundColor){}, but without success. let changeBackgroundColor = document.querySelectorAll('[data-styl ...

Tips for getting links to wrap or scroll within a column element in Angular

In my row element with two columns, I am facing an issue where the first column sometimes overlaps the second column due to a very long link in the problem.problem_description section. I want to find a way to have long links wrap or be scrollable. However, ...

When utilizing Angular CDK virtual scroller, an error occurs stating that @angular/core/core does not have an exported member 'ɵɵFactoryDeclaration'. Can anyone explain why this is happening

After adding CDK Virtual Scroller to my ionic 5.3.3 project using the command: npm add @angular/cdk The version installed is: "@angular/cdk": "^13.0.2" The scroller viewport contains an ion-item-group: <ng-template #showContentBlo ...

the ngIf function executes multiple times instead of just once

Custom Layout <pre *ngIf="canAccess()">{{email|json}} - {{user|json}}</pre> Logic Implementation canAccess() { console.log('Access granted: ', this.auth.checkAuthorization()); return this.auth.checkAuthorization(); } Sec ...

Exploring Angular: A Comparison of AfterViewInit() and AfterContentInit()

I am trying to understand exactly what triggers the AfterViewInit() and AfterContentInit() life-cycle hooks. According to the Angular documentation, AfterViewInit() is called by Angular after it creates a component's child views. and for AfterCon ...

Challenges encountered when using sass-loader with bootstrap in Angular 5

I'm encountering a problem with Angular 5 when trying to execute the command ng serve. The issue is as follows: ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":fa ...

Error due to PlatformLocation's location dependency issue

My AppComponent relies on Location (from angular2/router) as a dependency. Within the AppComponent, I am using Location.path(). However, when running my Jasmine test, I encountered an error. Can you help me identify the issue with my Jasmine test and guide ...