Comments (5)
I have the same problem.
@KingMario Did you find a workaround?
from ng-trim-value-accessor.
If others are interested in a workaround, I respond to my own question:
Currently, the directive TrimValueAccessor
provided in this project does not work correctly for input
elements with a type
or readonly
attribute which is set dynamically via property binding. For these rare cases I implemented a trimming directive (based on this project) and use it in those input
elements via trim
and suppress TrimValueAccessor
with the CSS class ng-trim-ignore
.
My current implementation of this directive:
@Directive({
providers: [{
multi: true,
provide: NG_VALUE_ACCESSOR,
useExisting: TrimDirective,
}],
selector: "[trim]",
})
export class TrimDirective extends DefaultValueAccessor implements AfterViewInit {
private afterViewInit = false;
constructor(
renderer: Renderer2,
private elementRef: ElementRef,
@Optional() @Inject(COMPOSITION_BUFFER_MODE) compositionMode: boolean,
) {
super(renderer, elementRef, compositionMode);
}
ngAfterViewInit(): void {
this.afterViewInit = true;
}
@HostListener("input", ["$event.target.value"])
onInput(value: string): void {
this.onChange(this.trimIfNeeded(value));
}
@HostListener("blur", ["$event.target.value"])
onBlur(value: string): void {
this.writeValue(value);
}
// tslint:disable-next-line:no-any
writeValue(value: any): void {
super.writeValue(this.trimIfNeeded(value));
}
private trimIfNeeded(value: string): string {
return this.needsTrim() ? value.trim() : value;
}
private needsTrim(): boolean {
// wait for property binding
if (!this.afterViewInit) {
return false;
}
const inputElement: HTMLInputElement = this.elementRef.nativeElement;
return !inputElement.readOnly && ["checkbox", "radio", "password"].indexOf(inputElement.type) < 0;
}
}
from ng-trim-value-accessor.
@stenzengel just my two cents: https://www.npmjs.com/package/ngx-trim-directive
It lies on a simple fact that Angular listens to input event to bring the view-to-model binding into being.
from ng-trim-value-accessor.
@KingMario Thanks. ngx-trim-directive
looks like a similar implementation to my TrimDirective
.
from ng-trim-value-accessor.
@stenzengel well, it's in a different way actually. The directive just sends an input event after trimming the value of the element so that the model will be updated by the ValueAccessor behind, whichever it is.
The disadvantage of the directive is that, if the user binds a callback to the input event, the callback will be called twice on each of user's keystrokes.
Since Angular is a data-driven framework, I don't see any necessity to bind to the input event during my daily development. And a debounced binding of the input event, which is usually applied in event binding, is helpful to overcome the disadvantage.
Why is another directive?
I tried the ng-trim-value-accessor of this repo (thanks @khashayar for your great job) and angular2-trim-directive, but they both have some issues regarding with FormControl states.
I fixed two of the issues of angular2-trim-directive, but figured out that it's too complex underlying the forms implementation of Angular to be touched as much as it should be.
Then I ran into the idea that sending an input event to let Angular itself maitain the model and states.
@stenzengel Thanks for you comment on my issue and if it's possible, you may fix it by submitting your codes and raising a pull request to this repo, so that this issue and discussion can be closed.
from ng-trim-value-accessor.
Related Issues (20)
- touched broken for matInput HOT 3
- TypeError: Class constructor DefaultValueAccessor cannot be invoked without 'new' HOT 7
- inputs(except those whose type is password) are always untouched HOT 2
- Email inputs are not updated
- bound value not set
- I get "More than one custom value accessor matches form control with unspecified name attribute" HOT 1
- why at the end of the apostrophe?
- core.js:1598 ERROR Error: Uncaught (in promise): Error: More than one custom value accessor matches form control with unspecified name attribute HOT 1
- Unable to use [(ngModel)] in mat-autocomplete when ng-trim-value-accessor is used HOT 1
- Does not work with Ivy HOT 2
- not support in Angular 8 HOT 4
- Doesn't work with closure compiler HOT 2
- Add forRoot Method to TrimValueAccessorModule HOT 5
- Trim should not be applied to input type number HOT 1
- Apply trimmed value on blur HOT 5
- ng build --prod fails with `...src/trim-value-accessor.ts has no selector, please add it!` HOT 1
- Error: More than one custom value accessor
- Provide an op-out option
- Does not run with Angular 5 HOT 8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ng-trim-value-accessor.