ERROR: Cannot read property 'apply' of undefined and ERROR: this.onModelChange is not a function #74
Comments
mikeveltman
changed the title
mikeveltman
changed the title
|
Any solutions for this bug? |
|
@Alexander-Fuchs Still no solution, but I started using toLocaleString as a temporary solution and a currency pipe where needed. |
|
Is there an alternative or workaround available for this bug? |
|
@jginorio As a workaround I started using toLocaleString and a currency pipe where needed |
|
Thanks, but how does that work exactly when a user is doing the input on a form? I've tried using the "valueChanges" observable and setting the value again with the currency pipe but on the first time it works because the current value is a number, on the second time the value is a currency(ex: $100.00) so it throws and error when trying to parse the value to currency. |
|
Bear with me, I will try my best to explain my solution. I've almost never explained stuff like this on git or stackoverflow so if you have more questions let me know. For every input field in a form I keep track of a controlValue (ISO value/number: 1234.4). I've made two functions: fromLocaleNumberStringToISO and fromISOToLocaleNumberString.
|
|
Hey guys, let me share with you what I did..
After this, the error message disappeared. I hope it can help you! |
Brou! It works like charm! |
|
I'm not using ngModel, using reactive forms, any way around this? |
|
@tayambamwanza check this are you using both of them |
|
Hello everyone! I made a workaround for this problem that now works with Reactive Forms. I only was able to fix it with the blur method. Internally, the component uses bidirectional data binding with value conversion, as suggested by @mikeveltman. Externally only needs to pass your import { NgxCurrencyConfig } from 'ngx-currency';
import { Component, forwardRef, Input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@Component({
selector: 'app-input-currency',
template: `
<label
*ngIf="label"
[class.invisible]="!label"
class="text-sm font-medium text-gray-300 hover:bg-dark-interactive-12"
>
{{ label }}
</label>
<input
pInputText
currencyMask
[options]="config"
(input)="onInput($event)"
(blur)="onBlur()"
type="text"
[(ngModel)]="displayValue"
[placeholder]="placeholder"
[readonly]="readonly"
[disabled]="disabled"
class="select text-lg w-full bg-dark-blue-1 focus:outline-none border-b border-white"
/>
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => InputCurrencyComponent),
multi: true,
},
],
})
export class InputCurrencyComponent implements ControlValueAccessor {
@Input() label?: string;
@Input() placeholder?: string;
@Input() config: Partial<NgxCurrencyConfig> = {
prefix: '',
suffix: ' €',
thousands: '.',
decimal: ',',
};
@Input() readonly?: boolean = false;
@Input() disabled: boolean = false;
value?: string;
displayValue?: string;
onChange: (value: string) => void = () => {};
onTouched: () => void = () => {};
writeValue(value: string): void {
this.value = value;
this.displayValue = this.fromISOToLocaleNumberString(value);
}
registerOnChange(fn: (value: string) => void): void {
this.onChange = fn;
}
registerOnTouched(fn: () => void): void {
this.onTouched = fn;
}
setDisabledState?(isDisabled: boolean): void {
this.disabled = isDisabled;
}
onInput(event: Event): void {
const input = event.target as HTMLInputElement;
this.value = this.fromLocaleNumberStringToISO(input.value);
this.displayValue = this.fromISOToLocaleNumberString(this.value);
this.onChange(this.value);
}
onBlur(): void {
this.onChange(this.displayValue!);
this.onTouched();
}
fromLocaleNumberStringToISO(value: string): string {
const thousands = this.config.thousands ?? '';
const decimal = this.config.decimal ?? '.';
return value.replace(new RegExp(thousands, 'g'), '').replace(decimal, '.');
}
fromISOToLocaleNumberString(value: string): string {
if (!value) {
return '';
}
const decimal = this.config.decimal ?? '.';
return value.replace('.', decimal);
}
} |
When I use the example:
I get the following error when I click on the input and then click somewhere else:
And when I'm changing the values in the input I get the following error:
The application is running on Angular 9
The text was updated successfully, but these errors were encountered: