In Safari, if you type the symbol at the beginning/middle a cursor usually moves to the end

For quick install, can you add your project to npm?

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.

1. Have a reactive form and set the value as null:
   

2. Use in a textarea element:
   

3. IE shows null:
   

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.

trim directive doesn't work with input type="email",. working fine with type="text".

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

Support for trimming is not present when you paste a content, it only works when blur is triggered.
Please, add this functionality this library.

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.

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.

I have created the stackblitz link for showing the issue.
https://stackblitz.com/edit/angular-trim-a27pve?file=src%2Fapp%2Fapp.component.ts

• I have added an input field with model name as cardOwnerName
  <input trim="blur" (change)="onChange($event.target.value)" [(ngModel)]="model.cardOwnerName" #cardOwnerName="ngModel">
• I have set model.cardOwnerName value as 0
  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.

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

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

1. trim input after blur
2. trim if all whitespace and also display error on the required field.

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?

The directive not remove the spaces from the value of the reactive form input (only the visible content).

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.

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.

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

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.

            ^

Error: Metadata version mismatch for module C:/Users/ccseb/n ode_modules/ng2-trim-directive/dist/ound version 4, expected 3

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.

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.

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'

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.

In my app I have a Form with a Control that has 2 validators:

• Required (to make sure that the field is not empty)
• Pattern (a regular expression that makes sure that the field is a valid URL)

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:

• SCENARIO USING 2.3.0: https://stackblitz.com/edit/angular-se8hgt
• SCENARIO USING 2.3.1: https://stackblitz.com/edit/angular-czfmbx

HOW TO REPRODUCE THE DIFFERENCE:

• Initially the field is empty and the error "Required" is displayed
• Type some random text in the field, since it's not a valid URL, the error "Pattern" is displayed
• Delete the text

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.

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 👍

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.

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

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

1. Open the playground using Safari
2. Enter a value (such as [email protected])
3. Move the cursor position to anywhere but the end (eg. before the @ symbol)
4. Start typing more than one character

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.