Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
ngx-trim-directive
Advanced tools
Readme
This directive helps to trim whitespaces of an input text value.
It lies on a simple fact that Angular listens to input
event to bring the view-to-model binding into being.
* According to the description of updateOn property of AbstractControlOptions interface, when updateOn is set to blur
or submit
, Angular listens to blur
or submit
event for model update. In this directive, update-on-blur
case is handled in a hack way. No further processing is required for update-on-submit
case.
Since extra input
and blur
events are dispatched, if you bind a callback to input
event or blur
event, the callback will be invoked twice on input
or blur
.
To overcome the disadvantage, a debounced function is recommended for the event binding.
The directive works with Angular 16+. For earlier versions of Angular, please use version 1.1.0 or 2.0.0.
1.Install ngx-trim-directive
.
npm i -S ngx-trim-directive
2.Import NgxTrimDirectiveModule
to your Angular module.
import { NgxTrimDirectiveModule } from 'ngx-trim-directive';
@NgModule({
imports: [
// ...
NgxTrimDirectiveModule,
// ...
],
// ...
})
3.Add the "trim" attribute to an input element or a textarea element.
<input type="text" ... trim>
Generally, the input value will be trimmed automatically whenever the bound model is initiated or is updated programmatically. There is a boolean trimOnWriteValue property to switch this behavior on
or off
. The default value of this property, if omitted, is true, which means the functionality is on. You can turn the functionality off by setting the trimOnWriteValue
property to false.
<input type="text" ... trim [trimOnWriteValue]="false">
4.If you want to trim the value ONLY on blur event, you should set the value of trim attribute to blur
. This is very handy if a whitespace is allowed inside the input text value.
<input type="text" ... trim="blur">
5.You may turn trim off by binding false to the trim attribute
<input type="text" ... [trim]="trimOption">
<button (click)="trimOption = ''">
Trim on Input
</button>
<button (click)="trimOption = 'blur'">
Trim on Blur
</button>
<button (click)="trimOption = false">
Turn Trim Off
</button>
Where trimOption
is a property of the component class
trimOPtion: '' | 'blur' | false = '';``
trim="blur"
or for ngModel bug fixedblur
updateOn option processedThank you all for your contribution to this directive!
Good luck.
FAQs
This directive helps to trim whitespaces of an input text value.
The npm package ngx-trim-directive receives a total of 7,189 weekly downloads. As such, ngx-trim-directive popularity was classified as popular.
We found that ngx-trim-directive demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.