struggling to access the value of [(ngModel)] within Angular 6 component

When working in an HTML file, I am using ngModel to retrieve a value that I want to utilize in my component.

edit-customer.component.html

<input id="userInfoEmail" type="text" class="form-control" value="{{userInfo.email}}" [(ngModel)]="userInfo.email" disabled>

Since it is utilizing two-way binding, I have implemented it in my component as shown below:

edit-customer.component.ts

checkUserEmail(): void {
    this.userInfo.email = this.userEmail;
    this.customerService.checkEmail(this.userEmail).subscribe((res) => {
        if (res.twoFactorEnabled === true) {
            this.isButtonDisabled = false;
        }
        else {
            this.isButtonDisabled = true;
        }
    })
}

I have also declared this.userEmail:string;, however, I encountered an error displaying 'undefined' on my console. After reading about the necessity of initializing the object, I am currently stuck trying to figure out how to proceed.

angulartypescriptangular6primengangular-ngmodel

Answer №1

Avoid using the value attribute with ngModel, delete it first,

  <input id="userEmail" type="text" class="form-control" [(ngModel)]="user.email" disabled>

Now you can retrieve the value in the controller like this,

console.log(this.user.email);

Make sure to define user at the beginning as,

user: any = {}; if you have a specific type, replace any accordingly

Answer №2

you can also accomplish this task

within the TypeScript file by creating a function like below:

  get_coin_current_market_value(symbol){
console.log('symbol is ',symbol);

}

Then, in the HTML code, add the following snippet:

 <select class="form-control" name="coin" [(ngModel)]="symbol" 
        (ngModelChange)="get_coin_current_market_value(symbol)">
        <option *ngFor="let coin of allCoinsArray">
               {{ coin.symbol }}
         </option>
 </select>

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

Guide to customizing CSS styles within a div element using TypeScript code in a Leaflet legend

I'm struggling to add a legend to my map using Angular 5 and typescript. I need help with setting CSS styles for the values (grades) that are displayed on the legend. Can someone guide me on where to put the styles? TS: createLegend() { let lege ...

htmlcsstypescriptwebangular5

Getting the received payload in Angular 4+

I am currently working on a front-end module in Angular and I need to send data from my app to another application where the user is already logged in. The data will be sent via POST request in JSON format. My question is, how can I access this payload i ...

angularhttppostroutespayload

Mapping an HTTP object to a model

Currently facing an issue with mapping an http object to a specific model of mine, here is the scenario I am dealing with: MyObjController.ts class MyObjController { constructor ( private myObj:myObjService, private $sco ...

javascriptangulartypescriptlodash

Utilizing ALERTIFY JS (v1.9.0) with Angular 2: Step-by-Step Guide

I am having trouble implementing AlertifyJS (v1.9.0) in my Angular 2 application. In the vendor.ts file, I have included the following: import "alertifyjs/build/alertify.min.js"; import "alertifyjs/build/css/alertify.min.css"; and made a call to alertify ...

angulartypescript2.0alertifyjs

Embed the div within images of varying widths

I need help positioning a div in the bottom right corner of all images, regardless of their width. The issue I am facing is that when an image takes up 100% width, the div ends up in the center. How can I ensure the div stays in the lower right corner eve ...

htmlcssangulartypescript

To properly format the date value from the ngModel in Angular before sending it to the payload, I require the date to be in the format

When working with Angular 9, I am facing an issue where I need to format and send my date in a specific way within the payload. Currently, the code is sending the date in this format: otgStartDate: 2021-07-20T09:56:39.000Z, but I actually want it to be for ...

javascriptangulartypescript

Using Mat-Error for Two Way Binding leads to frequent triggering of ngModelChange事件

I am working with a mat input field that has two-way data binding using ngModel, and I want to add validation using mat-error and formControl. <mat-form-field [formGroup]="myForm"> <input matInput formControlName="myFormName" autocomplete="off" ...

htmlangulartypescript

What is the process of TypeScript module resolution within the Play framework?

In my Play project, I am interested in incorporating Angular 2 with TypeScript. Utilizing the sbt-typescript plugin and the angular2 WebJAR, I have encountered a situation where Play places the extracted WebJAR in target/web/public/main/lib/angular2. Ideal ...

playframeworktypescriptsbtangular

Error: Trying to modify an immutable property 'title' of object '#<Object>' - React JS and Typescript

Whenever I press the Add button, all input values are stored in a reducer. However, if I append any character to the existing value in the input fields, it triggers the following error: Cannot assign to read only property 'title' of object &apos ...

reactjstypescript

What is the reason behind the lag caused by setTimeout() in my application, while RxJS timer().subscribe(...) does not have the same

I am currently working on a component that "lazy loads" some comments every 100ms. However, I noticed that when I use setTimeout for this task, the performance of my application suffers significantly. Here is a snippet from the component: <div *ngFor ...

javascriptangulartypescriptrxjs

Singleton Pattern in Angular Dependency Injection

In my code, I have a service called MyService that is decorated with the following: @Injectable({ providedIn: 'root' }) Part of its implementation includes: private myData: string = ''; setData(data: string) { this.myData = d ...

angulardependency-injection

What is the process of converting a byte array into a blob using JavaScript specifically for Angular?

When I receive an excel file from the backend as a byte array, my goal is to convert it into a blob and then save it as a file. Below is the code snippet that demonstrates how I achieve this: this.getFile().subscribe((response) => { const byteArra ...

javascriptangulartypescriptentity-framework

Can you provide guidance on how to specifically specify the type for the generics in this TypeScript function?

I've been diving into TypeScript and experimenting with mapped types to create a function that restricts users from extracting values off an object unless the keys exist. Take a look at the code below: const obj = { a: 1, b: 2, c: 3 } fun ...

javascripttypescript

Sending multiple JSON objects using Angular's HTTP Post method can be done

I need to send multiple JSON objects through HTTPClient, one at a time consecutively. How can I achieve this? Currently, I am iterating over an existing object array to create a new object array that needs to be posted. While I can successfully log each o ...

angularfor-looppostrxjshttpclient

Center align the mat-expansion-panel material component in a vertical orientation

When working with the mat-expansion-panel component alongside a mat-accordion, I've encountered an issue where the items are not aligning vertically at the center/middle. I'm unsure of the proper method to achieve vertical alignment for the conte ...

htmlcssangularangular-material

Encountering a PropertyTypeError while attempting to process a payment via Stripe in conjunction with use-shopping-cart on Next.js

Upon reaching the checkout page, I encounter the message: Invalid value with type "undefined" was received for stripe. Valid type for stripe is "string". This issue seems to be related to the redirectToCheckout function. Can someone assist me? The cart-s ...

javascripttypescriptnext.jsstripe-payments

How to conceal the side navigation bar on specific pages or components within an Angular application

Currently immersed in developing a web application with Jhipster and Angular. I've managed to set up a side navbar along with a top navbar on every page. However, I'm struggling to hide the side navbar on specific pages and could use some guidanc ...

angulartypescripthidenavbarjhipster

Ways to modify the appearance of the button within ion-calendar

Looking to customize the styling of ion-calendar classes Attempting to add styles to the ion-calendar-month class, but not seeing any changes take effect. ...

javascriptcssangularionic5

Angular's queryParams do not appear to properly connect with the query parameters

My code seems to have a mistake somewhere, but I can't figure it out. In my [queryParams] = "{allowEdit: server.id == 3 ? 1 : 0}", the params object is empty when I subscribe to it in the edit-server component. Why is it empty and how do I a ...

angulartypescriptfrontend

Sending data from child components to parent components in Angular

I'm facing an issue with retrieving data from a child array named store within user data returned by an API. When trying to access this child array in my view, it keeps returning undefined. Code export class TokoPage implements OnInit { store= nu ...

javascriptangulartypescript