anein / angular2-trim-directive Goto Github PK
View Code? Open in Web Editor NEWthe directive trims whitespaces from the end of an input text value.
License: MIT License
the directive trims whitespaces from the end of an input text value.
License: MIT License
Using the directive trim on blur is not trigger the angular change callback.
<input trim="blur" (change)="onChange($event.target.value)" >
The function onChange($event.target.value)
is not been called in Microsoft Edge when using the directive even when isn't necessary trim the string.
Unfortunately you need to use Edge to reproduce: https://stackblitz.com/edit/angular-trim
When using trim="blur"
along with Reactive Forms, if the user focuses on the input field and then unfocuses, without typing anything, your directive will cause the Control to be marked as dirty (which interferes with application logic that depends on the Control being pristine, such as cancel/discard changes confirmation).
I looked at the code and I think the problem is in the updateValue()
function. I think that if the value of the field is empty (''
), then the updateValue()
function should simply return without setting the value.
When used under the Safari browser on the MAC system, there is a bug in the input. Each keystroke will copy the characters entered earlier. The official demo also has this problem. Hope to fix it.
the first issue is that, if I have other directives based on valueAccessor, like a date-formatter or input-suggest, multiple accessors seem to have conflict.
secondly, it performs well on Chrome, while on Safari it acts weird when I'm typing Chinese Pinyin, some characters are duplicated for several times. I think maybe because Safari has different behaviors on input
event - there are 2 event fired when composition is done: a deleteContent
to delete unended composition like ni'hao
, and a inputFromComposition
event to insert completed text 你好
, while on Chrome there is only one normal inputCompositionText
event.
If we copy some text and paste on the input textbox which has required field, the validation of the field is invalid. We can replicate the issue in your example form as well. Dirty & Valid is not updated.
I'm using Angular 5 reactive forms.
Trim directive version: 2.2.1
Reproduction: https://stackblitz.com/edit/angular-v5pu3v
As you can see in my reproduction, I have two disabled fields. The one using the [trim]="'blur'"
directive does not appear disabled when it should.
It would be great if there was an option to turn the trim directive on/off (that can be bound to some variable). I tried setting [trim]="something-that-is-not-an-event", for example [trim]="disabled", and this would nearly work save for a small glitch in updateValue:
private updateValue(event: string, value: string): void {
// check if the user has set an optional attribute, and Trimmmm!!! Uhahahaha!
value = this.trim !== "" && event !== this.trim ? value : value.trim();
const previous = this._value;
// write value to the element.
this.writeValue(value);
// ...
if ((this._value || previous) && this._value.trim() !== previous) {
this.onChange(this._value);
}
}
When this.trim doesn't match an event, the value is not trimmed and writeValue is called with the actual value (OK). But the onChange is propagated when this._value.trim() !== previous. This assumes the value has always been trimmed, which is not the case according to the "Uhahaha" line at the beginning of the function :).
So what happens when I type "1" then "space" with trimming disabled, writeValue will write the "1" but for the space, it will not propagate onChange because "1 ".trim() does equal previous.
I think what you want here is:
if ((this._value || previous) && this._value !== previous) {
this.onChange(this._value);
}
This will propagate the change whenever the value actually changes, regardless of whether the value was trimmed or not.
I have created the stackblitz link for showing the issue.
https://stackblitz.com/edit/angular-trim-a27pve?file=src%2Fapp%2Fapp.component.ts
<input trim="blur" (change)="onChange($event.target.value)" [(ngModel)]="model.cardOwnerName" #cardOwnerName="ngModel">
model: any = { cardOwnerName: 0 };
but the zero value is not showing in the input field. If I give any value other than 0 it is showing.Hi,
When using this component in combination with reactive forms, if the value of my field is null, the string null is shown to the user.
Only on IE browser
Example
https://stackblitz.com/edit/angular-9op1yr
Whenever this directive is used on an input, the browser AutoFill does not update the ngModel.
I am now using this directive: https://github.com/KingMario/angular2-trim-on-blur which does the same thing but does not have this issue.
Description
If one tries to edit a text input's value from the middle (or start) of the value the cursor is moved to the end position for the next input. This is only on Safari web browser.
Reproduction steps
[email protected]
)@
symbol)Expected outcome
The new text should be entered at the cursor position and the cursor position should only move with the new input
Actual outcome
The first character is entered at the cursor position. The cursor is moved to the end of the input.
^
Error: Metadata version mismatch for module C:/Users/ccseb/n ode_modules/ng2-trim-directive/dist/ound version 4, expected 3
For quick install, can you add your project to npm?
If I set "target": "es6"
in my tsconfig, whenever I use the [trim]
directive I get the following error:
TypeError: Class constructor DefaultValueAccessor cannot be invoked without 'new'
The directive not remove the spaces from the value of the reactive form input (only the visible content).
angular v 6.1.10
ng2-trim-directive v 2.3.0
using in reactive form with trim="blur" options
it works fine as expected
BUT facing one strange issue. when user input only a single letter, it throws the same error as required.
interestingly it works fine when writing 2 letters and removes the later from the input box.
Will you please check this issue?
check this demo . enter 'a' and then enter aa
and remove the a
why both are behaving differently?
Support for trimming is not present when you paste a content, it only works when blur is triggered.
Please, add this functionality this library.
trim directive doesn't work with input type="email",. working fine with type="text".
Hello Sir,
great directive!
I had just one small request if possible.
Your directive does not work with <textarea> out of the box.
The fix seems pretty simple.
I changed line 39 in input-trim.directive.js from:
selector: 'input[trim] ',
to:
selector: 'input[trim] , textarea[trim]',
Which seems to fix the problem.
However I am a bit of a novice at this, and would love for it to work out of the box as I seem to have a bit of a problem saving those changes.
Thanks for the great directive, keep up the good work 👍
Hi, I am wondering if I there some configuration for allowing whitespace between string, I just want to trim whitespace before and after some user's input,
I understand that we can't determinate if it is space between, but probably on some 'onblur' event trim last whitespaces
the trim directive does not work well when the model is undefined.
then it converts undefined to a string "undefined"
so the text input is filled with "undefined" instead of being empty
In my app I have a Form with a Control that has 2 validators:
A text error "Required" or "Pattern" is displayed according to what error is there.
Unfortunately, the version 2.3.1
changes the behaviour and this shouldn't happen since it's not a major release.
To reproduce the same scenario with different trim-directive versions:
2.3.0
: https://stackblitz.com/edit/angular-se8hgt2.3.1
: https://stackblitz.com/edit/angular-czfmbxHOW TO REPRODUCE THE DIFFERENCE:
At this point, using version 2.3.0
will correctly display "Required" since the field is now empty, however the scenario that uses version 2.3.1
will keep displaying "Pattern", which is wrong.
With version 2.1.1 there is no longer the required files in the dist folder of the package. Thus the import is not working any longer. See this error:
ERROR in .....ts(8,33): error TS2307: Cannot find module 'ng2-trim-directive'.
Everything seems to be placed into a dist/src folder now and there is also an additional dist/node_modules folder which is probably not wanted.
With 2.1.0 the package structure seems to be still ok.
Tried upgrading a project that uses ng2-trim-directive to Angular 11 and I see the following error during build:
Error: node_modules/ng2-trim-directive/dist/input-trim.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of AuthenticationModule, but could not be resolved to an NgModule class.
This likely means that the library (ng2-trim-directive) which declares InputTrimModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
Pasting something into an input field with "trim" doesn't trigger control.valueChanges
. This prevents validators from running and the form content isn't updated with the copy pasted data. This issue is present on the demo page. v2.1.4 works normally.
Angular compilation done, starting webpack bundling.
Error: Metadata version mismatch for module ~/Documents/GitHub/webapp/node_modules/ng2-trim-directive/dist/input-trim.directive.d.ts, found version 4, expected 3
In Safari, if you type the symbol at the beginning/middle a cursor usually moves to the end
It seems that in a template driven form, such as the following...
<input type="text" class="form-control input-lg" id="firstName" required minlength="2" maxlength="50" [(ngModel)]="model.firstName" name="firstName" #firstName="ngModel" aria-required="true" [attr.aria-invalid]="!!firstName.errors" trim>
<div *ngIf="firstName.errors && (firstName.touched) class="text-danger error">
<div *ngIf="firstName.errors.minlength">Cannot be less than 2 characters.</div>
<div *ngIf="firstName.errors.required">Please enter your first name.</div>
</div>
The "touched" validation does not trigger but when removing the directive, it does work as intended. Oddly enough, switching it to dirty acts as touched at that point. @anein
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.