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

Question

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.

angular typescript angular6 primeng angular-ngmodel

Answer 1

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

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 3

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>

Answer 4

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>

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

Answer №1

Answer №2

Similar questions

How do you verify an OpenID Connect access token produced by Azure AD v2 in an ASP.NET Core web API?

Generate a commitment from the function

Issue encountered with TypeORM and MySQL: Unable to delete or update a parent row due to a foreign key constraint failure

Ways to conceal a table and button in the absence of data for display

VIDEOJS ERROR: A peculiar mistake has occurred. TypeError: The property 'value' cannot be read since it is undefined in the context of

Fresh React framework

The reason for the Jest failure is that it was unable to locate the text of the button

The power of absolute paths in React Native 0.72 with TypeScript

Harnessing the power of config data within the forRoot function

How can I ensure a function only runs after all imports have been successfully loaded in Vue 3?

Tips for sending FormData and request body with angular's httpclient

What is the best way to ensure that each service call to my controller is completed before proceeding to the next one within a loop in Angular?

How can I retrieve all values in an object in Angularfire2 without needing to reference the key of the parent object?

The code below is not working as it should be to redirect to the home page after logging in using Angular. Follow these steps to troubleshoot and properly

Deactivate a variable during operation

Declare that a method alters a value with state

Transform a JSON array containing individual objects into a new JSON array with objects

Adding cache to Observable in mat-autocomplete can improve performance by reducing redundant API calls

What is the most efficient way to convert a JSON object into a URL search parameter using as few characters as possible?

Encountering a situation where the data retrieved from Firestore in Angular TypeScript is returning as