Angular 11 Working with template-driven model within a directive

Question

Angular 11 Working with template-driven model within a directive

My currency directive in Angular 8.2 formats currency fields for users by using the following code:

<input [(ngModel)]="currentEmployment.monthlyIncome" currency>

@Directive({
  selector: '[ngModel][currency]',
  providers: [CurrencyPipe, NgModel],
})
export class CurrencyDirective implements OnDestroy {
  // implementation details...
}

After updating to Angular 11.2, I encountered the following issues:

No errors are thrown
this.model.value is always null
this.model.valueChanges.subscribe never fires

I'm unsure if this is due to a configuration problem or changes in how the model works. Any insights would be appreciated.

angular typescript angular-directive angular-forms angular-ngmodel

Answer 1

Answer №1

It turns out that the solution was to remove NgModel from providers. Here is the link to the original question on Stack Overflow: Angular 9 | ngModel Provider in Directive not working as expected

Although I'm not entirely sure why this change made a difference, implementing the following code resolved the issue:

@Directive({
  selector: '[ngModel][currency]',
  providers: [CurrencyPipe],
})
export class CurrencyDirective implements OnDestroy {
  // Property declarations
}

// Implementing methods for the CurrencyDirective class

Answer 2

It turns out that the solution was to remove NgModel from providers. Here is the link to the original question on Stack Overflow: Angular 9 | ngModel Provider in Directive not working as expected

Although I'm not entirely sure why this change made a difference, implementing the following code resolved the issue:

@Directive({
  selector: '[ngModel][currency]',
  providers: [CurrencyPipe],
})
export class CurrencyDirective implements OnDestroy {
  // Property declarations
}

// Implementing methods for the CurrencyDirective class

Angular 11 Working with template-driven model within a directive

Answer №1

Similar questions

Leverage and implement a reusable class in Typescript

Efficiently utilizing ngrx by orchestrating various services and actions to achieve accurate mapping

Utilize the useState() hook to add an object and display its data in a React Native

What could be causing the index.tsx file to not locate the Clock Module?

What is the best way to implement a hover delay for an element in Angular?

The function signature '(event: ChangeEvent<HTMLInputElement>) => void' does not match the expected type 'ChangeEvent<HTMLInputElement>'

Retrieve the values of a dynamic JSON object and convert them into a comma-separated string using Typescript

Guide to correcting the file path of an external css within the public directory on Express framework

The placeholder text in the matInput field is not being displayed

Unable to establish a connection between the HTML element and the TypeScript variable

In my coding project using Angular and Typescript, I am currently faced with the task of searching for a particular value within

Intellij IDEA does not offer auto-completion for TypeScript .d.ts definitions when a function with a callback parameter is used

What is the best way to insert a placeholder React element into a different Component using TypeScript?

Steps for importing jQuery to vendor.ts in Angular 2 webpack

Angular 2 - ERROR: The value of 'ngClassUntouched' expression has been modified after the initial check

What is the best way to use "ngModel #something="ngModel"" on a dynamically generated form field within a template-driven form?

"Creating a backend server using Node.js, TypeScript, and g

Utilizing Ngrx store for Reacting form validation with the integration of asynchronous validation

Avoiding page refresh while utilizing the ng5-slider component in Angular

When setting up Webpack with TypeScript, an error is encountered related to imports