How to assign a value to ngModel dynamically in Angular onblur event

2 min read 23-09-2024

How to assign a value to ngModel dynamically in Angular onblur event

In Angular, the ngModel directive is frequently used for two-way data binding in forms. However, there may be scenarios where you want to assign a value to ngModel dynamically when the user interacts with the form, particularly on the blur event. This article will discuss how to effectively achieve this in Angular.

Understanding the Problem Scenario

When a user moves focus away from an input field (the blur event), you might want to change the model value dynamically based on the input value or some other criteria.

Consider the following original code snippet that illustrates this concept:

<input [(ngModel)]="userInput" (blur)="updateValue()" />

In this example, we have an input field bound to the variable userInput. However, we haven't defined the updateValue method or what it does to the ngModel.

Solution: Assigning Values Dynamically on Blur

To dynamically assign a value to ngModel on the blur event, follow these steps:

Define Your Component: Create an Angular component with the necessary logic.
Implement the blur Event Handler: Write a function that updates the bound variable when the blur event is triggered.

Here's an example implementation:

import { Component } from '@angular/core';

@Component({
  selector: 'app-dynamic-model',
  template: `
    <input [(ngModel)]="userInput" (blur)="updateValue()" />
    <p>Your updated input: {{ userInput }}</p>
  `
})
export class DynamicModelComponent {
  userInput: string = '';

  updateValue() {
    // Dynamically modify the userInput variable when input loses focus
    if (this.userInput.trim() === '') {
      this.userInput = 'Default Value'; // Assign a default value if empty
    } else {
      this.userInput = this.userInput.toUpperCase(); // Convert input to uppercase
    }
  }
}

Explanation of the Code

User Input: We bind userInput to the input field using [(ngModel)], enabling two-way data binding.
Blur Event: The (blur) event is used to call the updateValue() method when the input field loses focus.
Dynamic Assignment: Inside updateValue(), we check if the input is empty or not. If it's empty, we assign it a default value. If it has content, we convert it to uppercase.

Practical Example

Imagine you have a form where users need to input their names. You want to ensure that if they leave the field empty, a placeholder name like "Guest" is shown, and if they enter their names, you want them to be displayed in uppercase. The above implementation achieves this behavior effectively.

Conclusion

Dynamically assigning values to ngModel in Angular during the blur event can enhance user experience and data validation. Using simple logic in your event handler allows you to manipulate the input as needed while keeping the code clean and easy to maintain.

Useful Resources

Angular Documentation - Official documentation on Angular, including forms and data binding.
Angular Forms Guide - Comprehensive guide on Angular forms, including reactive and template-driven approaches.
MDN Web Docs on Focus and Blur Events - Learn more about event handling in web applications.

With these concepts and examples, you should now have a solid understanding of how to handle dynamic assignments in Angular using the blur event. Happy coding!